vue+腾讯地图 实现坐标拾取器功能
Posted dreamholder
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+腾讯地图 实现坐标拾取器功能相关的知识,希望对你有一定的参考价值。
需求
1、搜索具体地址,自动填写经纬度,并在地图上标记
2、点击地图上一点,可重新填写经纬度并且标记
代码
- 在dom新建div渲染地图
<el-form-item label="店铺地址" prop="address">
<el-input v-model="fristForm.address"></el-input>
<el-input
class="long-lat"
v-model="fristForm.longitude"
placeholder="经度"
></el-input>
<el-input
class="long-lat"
v-model="fristForm.latitude"
placeholder="纬度"
></el-input>
<el-button size="mini" type="primary" @click="searchKeyword"
>搜索</el-button
>
</el-form-item>
<span class="changeAddress">点击地图更换分店定位地址</span>
<!-- 渲染地图的div容器 -->
<div id="container" class="mapbox"></div>
- js定义地图变量并设置需求
var searchService,geocoder,map,markersArray = [];
<script>
export default {
mounted() {
this.init();
},
methods:{
init() {
var that = this;
var center = new qq.maps.LatLng(39.916527, 116.397128);
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom: 13
});
var latlngBounds = new qq.maps.LatLngBounds();
qq.maps.event.addListener(map, "click", function(event) {
console.log(event);
that.fristForm.longitude = event.latLng.getLng(); // 经度
that.fristForm.latitude = event.latLng.getLat(); // 纬度
if (markersArray) {
for (let i in markersArray) {
markersArray[i].setMap(null);
}
}
var marker = new qq.maps.Marker({
map: map,
position: event.latLng
});
markersArray.push(marker);
});
geocoder = new qq.maps.Geocoder({
complete: function(result) {
console.log(result);
that.fristForm.longitude = result.detail.location.lng;
that.fristForm.latitude = result.detail.location.lat;
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map: map,
position: result.detail.location
});
markersArray.push(marker);
}
});
},
},
// 搜索地址
searchKeyword() {
var keyword = this.fristForm.address;
this.clearOverlays(markersArray);
//根据输入的城市设置搜索范围
// searchService.setLocation("北京");
//根据输入的关键字在搜索范围内检索
if (keyword) {
// searchService.search(keyword);
geocoder.getLocation(keyword);
} else {
alert("请输入地址");
}
},
}
</script>
文档参考
以上代码使用的是jsapi功能,目前对应功能已升级javascript API GL,地址解析功能可直接调取接口使用,欢迎大家体验!
作者:houqq
链接:https://segmentfault.com/a/1190000022211912
来源:segmentfault
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
以上是关于vue+腾讯地图 实现坐标拾取器功能的主要内容,如果未能解决你的问题,请参考以下文章