百度API的使用

一、创建MAP实例

var self = this
        window.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 = this
    var 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 = this
    var 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 = this
    var 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;
}

完了~~~~~嘻嘻嘻