这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战
在之前8月的一篇 vue-腾讯地图的使用 中介绍了使用腾讯地图绘制点、线,近来项目升级,需要绘制围栏、多点以及搜索功能,围栏就是一个闭合的面,当点超出围栏即为不合格,多点就是自己画点,可拖动点的位置,同时支持了输入关键字可搜索的地名的功能,经过一番敲敲打打,积累了一些经验,记录一下。 基础的代码不再赘述,重点说一下升级的地方
一.绘制围栏
// 回显围栏
if(this.latLng && this.latLng.length > 0){
let path = [];
this.latLng.forEach(item => {
path.push(new window.qq.maps.LatLng(item.lat,item.lng));
});
this.getArea(path);
}else {
// 绘图工具
this.getDrawMan();
}
1.获取绘图工具
getDrawMan() {
// 绘图工具
drawingManager = new window.qq.maps.drawing.DrawingManager({
drawingMode: window.qq.maps.drawing.OverlayType.POLYGON,
// 设置DrawingManager地图控件的参数
drawingControlOptions: {
position: window.qq.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.qq.maps.drawing.OverlayType.POLYGON,
]
},
// 绘制polygon的属性
polygonOptions: {
strokeColor: '#5584FF',
fillColor: new window.qq.maps.Color(85, 132, 255, 0.5),
strokeWeight: 5,
strokeDashStyle: 'dash',// 多边形的形状。实线是solid,虚线是dash。
clickable: true,// 多边形是否可点击
editable: true,
},
snapMode: true,
});
drawingManager.setMap(map);
// 绘制完成
window.qq.maps.event.addListener(drawingManager, 'polygoncomplete', (event)=> {
// 绘制完成后,将经纬度坐标传给父级
this.$emit('saveLatLng',event.getPath().elems, zoomLevel);
drawingManager.setDrawingMode(null);// 清除绘制模式
this.lines = event;
polygon = null;
})
},
2.绘制围栏
getArea(path){
polygon = new window.qq.maps.Polygon({
path: path,// 多边形的路径,以经纬度坐标数组构成
strokeColor: '#5584FF',
fillColor: new window.qq.maps.Color(85, 132, 255, 0.5), // 多边形的填充色,可通过Color对象的alpha属性设置透明度。
strokeDashStyle: 'dash',// 多边形的边框样式 实线是solid,虚线是dash。
strokeWeight: 5,// 多边形的边框线宽
map: map,// 要显示多边形的地图
clickable: true,// 多边形是否可点击
editable: !this.disabled,// 启动编辑功能后,可拖动端点对多边形进行调整,双击节点可删除
zIndex: 1000,
});
let _this = this;
// 新增节点
window.qq.maps.event.addListener(polygon,"insertNode",function(event){
_this.$emit('saveLatLng',event.path.elems, zoomLevel);
});
// 移动节点
window.qq.maps.event.addListener(polygon,"adjustNode",function(event){
_this.$emit('saveLatLng',event.path.elems, zoomLevel);
});
// 删除节点
window.qq.maps.event.addListener(polygon,"removeNode",function(event){
_this.$emit('saveLatLng',event.path.elems, zoomLevel);
});
},
具体的效果如下:实心的白点是可拖动位置的,围栏必须是闭合的
二.绘制多点
// 添加dom监听事件
window.qq.maps.event.addListener(map, 'click', (event)=> {
this.addMarker(event.latLng);
marker.setPosition(event.latLng);
this.$emit('saveLatLng',markerArray, zoomLevel);
});
// 添加标记
if(this.latLng && this.latLng.length) {
this.latLng.forEach(item => {
let location = new window.qq.maps.LatLng(item.latitude,item.longitude);
this.addMarker(location);
})
}
添加标记
addMarker(location) {
marker = new window.qq.maps.Marker({
icon: new window.qq.maps.MarkerImage(require('@/assets/images/marker_blue.png'), new window.qq.maps.Size(32, 37)),
position: location,
map: map,
title: new Date().getTime()
});
// 非查看时候可移动
if(!this.disabled){
marker.setDraggable(true);// 设置标记可拖拽
}
let that = this;
markerArray.push(location);// 回调用
markerArr.push(marker);// 删除时候用
// 设置Marker停止拖动事件
window.qq.maps.event.addListener(marker, 'dragend', function(event) {//
markerArray = [];
markerArr.forEach(item =>{
if(item.title == marker.title){
item.lat = (event.latLng.lat).toFixed(6);
item.lng = (event.latLng.lng).toFixed(6);
}
let location = new window.qq.maps.LatLng(item.position.lat,item.position.lng);
that.addMarker(location);
})
that.$emit('saveLatLng',markerArray, zoomLevel);
});
},
效果图如下:
三.实现搜索功能
1.搜索地点html
<el-input v-model="keyword" placeholder="请输入关键字搜索" id="place" class="wid240"></el-input> 输入地址,自动完成
引入搜索库map.qq.com/api/js?v=2.…" + baseMapKey,baseMapKey是自己申请的key
2.搜索地点js
// 搜索实例化自动完成
this.ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'), {
offset: new window.qq.maps.Size(0, 5),
location: '南京市'
});
// 调用Poi检索类。用于进行本地检索、周边检索等服务
this.searchService = new window.qq.maps.SearchService({
complete: function(results){
if(!keyword){
if (markerSearchArr) {
for (let i in markerSearchArr) {
markerSearchArr[i].setMap(null);
}
}
markerSearchArr = [];
return;
}
if(results.type === "CITY_LIST") {
that.searchService.setLocation(results.detail.cities[0].cityName);
that.searchService.search(keyword);
return;
}
let pois = results.detail.pois;
let latlngBounds = new window.qq.maps.LatLngBounds();
for(let i = 0,l = pois.length;i < l; i++){
let poi = pois[i];
latlngBounds.extend(poi.latLng);
let marker = new window.qq.maps.Marker({
map: map,
position: poi.latLng
});
marker.setTitle(poi.name);
markerSearchArr.push(marker);// 删除时候用
}
map.fitBounds(latlngBounds);
}
});
// 添加搜索监听事件
window.qq.maps.event.addListener(this.ap, "confirm", function(res){
keyword = res.value;
that.searchService.search(keyword);
});
// 搜索结束
效果图如下:
以上是对腾讯地图的进一步使用了,记录一下,温故而知新!