vue 创建图片坐标点_vue使用高德地图根据坐标定位点的实现代码

前言

项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码

正文

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 = "暂无位置";

}

});

})

},

}

总结

以上所述是小编给大家介绍的vue使用高德地图根据坐标定位点的实现代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！