基于高德地图JS API实现Vue地图选点组件
<template>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
<button @click="getLocation">获取位置</button>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
marker: null,
position: null
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new AMap.Map('map', {
zoom: 15,
center: [116.397428, 39.90923] // 初始化地图中心点
});
AMap.plugin(['AMap.Geolocation'], () => {
this.geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位,默认:true
timeout: 10000 // 超过10秒后停止定位,默认:5s
});
this.map.addControl(this.geolocation);
this.geolocation.getCurrentPosition((status, result) => {
if (status == 'complete') {
this.onComplete(result);
} else {
this.onError(result);
}
});
});
},
onComplete(data) {
this.position = data.position; // 获取定位结果
this.map.setZoomAndCenter(15, this.position); // 设置中心点和缩放级别
this.marker = new AMap.Marker({
map: this.map,
position: this.position // 将标记放在定位点
});
},
onError(data) {
console.log('定位出错:', data);
},
getLocation() {
if (this.position) {
console.log('选取的位置:', this.position);
} else {
alert('请先定位');
}
}
}
};
</script>
这段代码使用Vue框架和高德地图JS API实现了一个简单的地图选点组件。用户打开页面时,地图会加载并定位到当前位置。用户可以点击按钮获取当前选择的位置坐标。这个例子展示了如何在Vue中集成高德地图API,并处理地图的初始化、定位和标记位置等功能。
评论已关闭