vue 腾讯地图实现搜索和点击添加标注,且只保留一个标注
在index.html中加入<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XXXXX"></script><template><div><a-input-searchplaceholder="请输入搜索的地址...
·
在index.html中加入
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XXXXX"></script>
<template>
<div>
<a-input-search
placeholder="请输入搜索的地址"
@search="onSearch"
enterButton="Search"
style="width: 300px;margin-left: 20px;"
/>
<div id="container" style="width:612px;height:500px;margin: 10px auto"></div>
</div>
</template>
<script>
var geocoder, map, marker = null;
export default {
data() {
return {
markersArray: []//用来存储标注
}
},
mounted() {
this.init()
},
methods: {
onSearch(value) {
console.log(value)
geocoder.getLocation(value);
},
init() {
var that = this
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 13
});
//绑定单击事件添加参数
qq.maps.event.addListener(map, 'click', function (event) {
//创建marker标注
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()),
map: map
});
that.markersArray.push(marker);
if (that.markersArray.length > 1) {
for(let i=0;i<that.markersArray.length-1;i++){
that.markersArray[i].setMap(null);//清除标记
}
}
var gps = event.latLng.getLat() + ',' + event.latLng.getLng()
that.$emit('mapChange', gps)
});
//调用地址解析类
geocoder = new qq.maps.Geocoder({
complete: function (result) {
map.setCenter(result.detail.location);
console.log(result.detail.location);
var gps = result.detail.location.lat + ',' + result.detail.location.lng
console.log(gps);
that.$emit('mapChange', gps)
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
that.markersArray.push(marker);
if (that.markersArray.length > 1) {
for(let i=0;i<that.markersArray.length-1;i++){
that.markersArray[i].setMap(null);//清除标记
}
}
}
});
}
}
}
</script>
更多推荐
已为社区贡献11条内容
所有评论(0)