百度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; }

完了~~~~~嘻嘻嘻

總結

以上是生活随笔為你收集整理的vue百度地图API、获取当前经纬度以及地理位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。