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>

总结

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