vue項目中使用高德地圖（根據坐標定位點）

前言

項目中需要根據坐標定位，將自己的實現過程寫下來，廢話不多說，上代碼

正文

<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> 

總結

以上就是本文的全部內容了，希望對大家有所幫助，若是有疑問或是對文中內容有爭議，請評論留言！