1.在百度地圖申請密鑰:http://lbsyun.baidu.com/ 將 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" ></script> 中的密鑰替換成你申請的,在vue項目的ind ...
1.在百度地圖申請密鑰:http://lbsyun.baidu.com/ 將
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" ></script> 中的密鑰替換成你申請的,在vue項目的index.html引用。 2. 在build 文件下下的 webpack.base.conf.js貼入代碼externals: { "BMap": "BMap" },
3. map.vue代碼(demo可以直接使用,demo使用了vue-clipboard2插件,請自行安裝)
<template> <div> <el-row > <el-col :offset="2" :span="8"> <el-input :id="suggestId" v-model="address_detail" :clearable='clearable' placeholder="請輸入店鋪地址,獲取店鋪坐標" > </el-input> </el-col> <el-col :span="2"> <el-button id="position" @click="search" type="primary">定位</el-button> </el-col> <el-col :span="12" > <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="onCopy" v-clipboard:error="onError" >經度 {{userlocation.lng}}</el-tag> <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="onCopy" v-clipboard:error="onError">緯度 {{userlocation.lat}}</el-tag> <el-tag type="success" ><<<<點擊左側按鈕複製經緯度信息</el-tag> </el-col> </el-row> <el-row> <el-col :offset="2" :span="18"> <div id="map_canvas" class="allmap"></div> </el-col> </el-row> </div> </template> <script> export default { data() { return { address_detail: "", //詳細地址 userlocation: { lng: "", lat: "" }, clearable: true, suggestId: "suggestId", map : {}, mk: {} }; }, created () { }, methods: { drawMap() { this.map = new BMap.Map("map_canvas"); // 創建地圖實例 this.map.addControl(new BMap.NavigationControl()); // 啟用放大縮小 尺 this.map.enableScrollWheelZoom(); this.getlocation();//獲取當前坐標, 測試時獲取定位不准。 var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 創建點坐標 this.map.centerAndZoom(point, 13); // 初始化地圖,設置中心點坐標和地圖級別 var marker = new BMap.Marker(point); // 創建標註 this.map.addOverlay(marker); // 將標註添加到地圖中 var ac = new BMap.Autocomplete({ //建立一個自動完成的對象 input: "suggestId", location: this.map }); var myValue; ac.addEventListener("onconfirm", (e)=> { //滑鼠點擊下拉列表後的事件 var _value = e.item.value; myValue =_value.province +_value.city +_value.district +_value.street +_value.business; this.address_detail = myValue; this.setPlace(); }); }, getMarker (point) { this.mk = new BMap.Marker(point); this.mk.addEventListener("dragend", this.showInfo); this.mk.enableDragging(); //可拖拽 this.getAddress(point); this.map.addOverlay(this.mk);//把點添加到地圖上 this.map.panTo(point); }, getlocation () { //獲取當前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition((r) =>{ if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){ this.getMarker(r.point); this.userlocation = r.point; }else { alert('failed'+this.getStatus()); } }); }, //綁定Marker的拖拽事件 showInfo(e){ var gc = new BMap.Geocoder(); gc.getLocation(e.point, (rs)=>{ var addComp = rs.addressComponents; var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//獲取地址 //畫圖 ---》顯示地址信息 var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)}); this.map.removeOverlay(this.mk.getLabel());//刪除之前的label this.mk.setLabel(label); this.address_detail = address; this.userlocation = e.point; }); }, //獲取地址信息,設置地址label getAddress(point){ var gc = new BMap.Geocoder(); gc.getLocation(point, (rs)=>{ var addComp = rs.addressComponents; var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//獲取地址 //畫圖 ---》顯示地址信息 var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)}); this.map.removeOverlay(this.mk.getLabel());//刪除之前的label this.address_detail = address; this.mk.setLabel(label); }); }, setPlace() { this.map.clearOverlays(); //清除地圖上所有覆蓋物 var th = this function myFun() { th.userlocation = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果 th.map.centerAndZoom(th.userlocation, 18); th.getMarker(th.userlocation); } var local = new BMap.LocalSearch(this.map, { onSearchComplete: myFun //智能搜索 }); local.search(this.address_detail); }, search () { var localSearch = new BMap.LocalSearch(this.map); localSearch.enableAutoViewport(); //允許自動調節窗體大小 this.searchByInputName(localSearch); }, searchByInputName(localSearch) { this.map.clearOverlays(); //清空原來的標註 var th = this; var keyword = this.address_detail; localSearch.setSearchCompleteCallback(function(searchResult) { var poi = searchResult.getPoi(0); th.userlocation = poi.point; th.map.centerAndZoom(poi.point, 13); th.getMarker(th.userlocation); }); localSearch.search(keyword); }, onCopy () { this.$message('內容已複製到剪貼板!'); }, onError () { this.$message('內容複製失敗,請重試!'); } }, mounted() { this.$nextTick(function() { this.drawMap(); }); } }; </script> <style scoped> .allmap { width: 100%; height: 400px; font-family: "微軟雅黑"; border: 1px solid green; } .el-tag { cursor: pointer; } </style>
希望對大家有幫助!