vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼
更新時間:2019年08月22日 09:08:24 作者:碼農(nóng)變身程序員
這篇文章主要介紹了vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
前言
項(xiàng)目中需要根據(jù)坐標(biāo)定位,將自己的實(shí)現(xiàn)過程寫下來,廢話不多說,上代碼
正文
<script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐標(biāo)點(diǎn) arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ mapDraw(arriveCoor){ map = new AMap.Map('map-location', { //map-location是嵌地圖div的id resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化 zoom:16, //初始化地圖層級 center: arriveCoor //初始化地圖中心點(diǎn) }); // 定位點(diǎn) this.addMarker(arriveCoor); }, // 實(shí)例化點(diǎn)標(biāo)記 addMarker(arriveCoor) { var _this = this; marker = new AMap.Marker({ icon: "", //圖片ip imageSize: "20px", position: arriveCoor, offset: new AMap.Pixel(-13, -30), // 設(shè)置是否可以拖拽 draggable: true, cursor: 'move', // 設(shè)置拖拽效果 raiseOnDrag: true }); marker.setMap(map); }, // 查詢坐標(biāo) mapCoor(lnglatXY){ var _this = this; AMap.service('AMap.Geocoder',function() {//回調(diào)函數(shù) 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>
總結(jié)
以上所述是小編給大家介紹的vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!

vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09 
詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01 
VUE前端從后臺請求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺請求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11 
vue深入解析之render function code詳解
vue對大家來說應(yīng)該再熟悉不過了,下面這篇文章主要給大家深入的解析了vue之render function code的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
2017-07-07