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> 

总结

以上就是本文的全部内容了，希望对大家有所帮助，若是有疑问或是对文中内容有争议，请评论留言！