百度API的使用
一、创建MAP实例
var self = thiswindow.map = new BMap.Map(this.$refs.allmap); // 创建Map实例window.geoc = new BMap.Geocoder(); //地址解析对象var point = new BMap.Point(113.5545526523,22.1191948179);var marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker);map.centerAndZoom(point, 18);map.enableScrollWheelZoom();map.enableContinuousZoom();// marker.addEventListener("click",function(e){// console.log('sss',e.point.lng, e.point.lat)// });map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});map.addControl(top_right_navigation);var styleOptions = {strokeColor:"red", //边线颜色。fillColor:"red",//填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3, //边线的宽度，以像素为单位。strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。fillOpacity: 0.6,//填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。}
二、输入框的智能搜索列表
let Ac = new BMap.Autocomplete( //建立一个自动完成的对象{"input": suggestId, "location": "珠海"});// map.clearOverlays();Ac.addEventListener("onhighlight", function (e) {//鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;document.getElementById("suggestId").innerHTML = str;});var myValue;Ac.addEventListener("onconfirm", function(e) {//鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;document.getElementById("suggestId").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;self.setPlace(myValue);//调用方法});
三、地址解析结果显示在地图上,并调整地图视野
setPlace(myValue) {var self = thisvar myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(myValue, function(point) {// console.log('tag', point)if (point) {let marker = new BMap.Marker(point);map.centerAndZoom(point, 14);map.addOverlay(marker);marker.enableDragging(); //标注可拖拽self.markListener(marker);self.clickEvent(point)} else {alert("您选择地址没有解析到结果!");}});},
四、拖拽后获取经纬度和点击标注提示框
markListener(marker) {var self = thisvar Point= marker.getPosition();// console.log('aaa', o_Point_now)var content = "<table>";content = content + "<tr><td> 地点："+document.getElementById("suggestId").value+"</td></tr>";content = content + "<tr><td> 经度："+Point.lng+"</td></tr>";content = content + "<tr><td> 纬度："+Point.lat+"</td></tr>";content += "</table>";var infowindow = new BMap.InfoWindow(content);marker.addEventListener("click",function(){this.openInfoWindow(infowindow);});//拖拽结束事件marker.addEventListener("dragend", function(e) {//获取覆盖物位置marker.closeInfoWindow();var o_Point_now = marker.getPosition();// self.gps.lng = o_Point_now.lng;// self.gps.lat = o_Point_now.lat;self.clickEvent(o_Point_now)// console.log('ddd', self.form.gps.lng,self.form.gps.lat)});},
五、根据经纬度来获取地址信息
clickEvent(point){var self = thisvar gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;console.log(rs);//地址信息self.form.gps.longitude = rs.point.lng;self.form.gps.latitude = rs.point.lat;self.form.address = rs.address;self.form.street = addComp.street + addComp.streetNumber;});},
希望能帮助你们~
哦，还有一点，有在弹出框中输入框的，一定要加
.tangram-suggestion-main {//百度地图搜索下拉显示z-index: 999999;}
完了~~~~~嘻嘻嘻
