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> 

 

总结

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