前言
項目中需要根據坐標定位,將自己的實現過程寫下來,廢話不多說,上代碼
正文
<script>var map,marker;export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐標點 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ mapDraw(arriveCoor){ map = new AMap.Map('map-location', { //map-location是嵌地圖div的id resizeEnable: true, //是否監控地圖容器尺寸變化 zoom:16, //初始化地圖層級 center: arriveCoor //初始化地圖中心點 }); // 定位點 this.addMarker(arriveCoor); }, // 實例化點標記 addMarker(arriveCoor) { var _this = this; marker = new AMap.Marker({ icon: "", //圖片ip imageSize: "20px", position: arriveCoor, offset: new AMap.Pixel(-13, -30), // 設置是否可以拖拽 draggable: true, cursor: 'move', // 設置拖拽效果 raiseOnDrag: true }); marker.setMap(map); }, // 查詢坐標 mapCoor(lnglatXY){ var _this = this; AMap.service('AMap.Geocoder',function() {//回調函數 var geocoder = new AMap.Geocoder({}); geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { //獲得了有效的地址信息: _this.arrive = result.regeocode.formattedAddress; else { _this.arrive = "暫無位置"; } }); }) },}</script>
總結
以上所述是小編給大家介紹的vue使用高德地圖根據坐標定位點的實現代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
新聞熱點
疑難解答