一.绘制线

1.绘制线路，拖动线路可编辑，双击可删除节点

• html部分
``````<div class="mapContainer">
<span>公里：{{distanceDraw}}公里</span>
<el-button size="mini" type="primary" @click="delPolygon" class="btn" v-if="!disabled">重新绘制</el-button>
<div id="mapItem" class="mapBox" :style="{
width: mapStyle.width,
height: mapStyle.height,
}"></div>
</div>

• js部分，定义变量
``````data() {
return {
paths: [],// 线路节点
longitude: '118.90581786632538',// 经度
latitude: '31.912693393211505',// 纬度
lngLatData: [], // 绘制多边形坐标点
distanceDraw: 0,// 绘制距离
lines: '',
};
},
props: {
latLng: Array,
distance: {
type: String,
default: ''
},
center: Array,
zoom: {
type: Number,
default: 13,
},
mapStyle:{
type:Object,
default(){
return{
width: '100%',
height: '550px',
}
}
},
disabled: Boolean,
},

• 引入所需js ，按需引入需要的js（key需要自己去申请一个）
``````loadMap() {
return new Promise(function(resolve, reject) {
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/gljs?libraries=geometry&v=2.exp&key="+ baseMapKey;
script.onerror = reject;
let script2 = document.createElement("script");
script2.type = "text/javascript";
script2.src = "https://map.qq.com/api/js?v=2.exp&libraries=drawing&key="+ baseMapKey;
script2.onerror = reject;
resolve();
});
},

• 地图初始化
``````init() {
if(this.center && this.center.length > 0) {
this.latitude = this.center[0];
this.longitude = this.center[1];
}
this.distanceDraw = this.distance || 0;
zoomLevel = this.zoom || 13;
// 地图初始化
map = new window.qq.maps.Map(document.getElementById('mapItem'), {
center: new window.qq.maps.LatLng(this.latitude,this.longitude),
zoom: this.zoom, // 设置地图缩放级别
scrollwheel: false,
scaleControl: true,//启用比例尺
scaleControlOptions: {
//设置控件位置相对右下角对齐，向左排列
position: window.qq.maps.ControlPosition.BOTTOM_RIGHT
},
zoomControl: true,
//设置缩放控件的位置和样式
zoomControlOptions: {
//设置缩放控件的位置为相对左方中间位置对齐.
position: window.qq.maps.ControlPosition.TOP_LEFT,
//设置缩放控件样式为仅包含放大缩小两个按钮
style: window.qq.maps.ZoomControlStyle.LARGE
},
panControl: true,// 平移控件
mapTypeControl: false,// 默认是地图和卫星
});
let that = this;
zoomLevel = map.getZoom();
that.\$emit('saveLatLng', null, null, zoomLevel);
});

// 回显线路
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.getLine(path);
}else {
// 绘图工具
this.getDrawMan();
}
},

• 获取绘图工具，设置绘图属性
``````getDrawMan() {
// 绘图工具
drawingManager = new window.qq.maps.drawing.DrawingManager({
drawingMode: window.qq.maps.drawing.OverlayType.POLYLINE,
// 是否启用DrawingManager地图控件，默认为false
// drawingControl: true,
// 设置DrawingManager地图控件的参数
drawingControlOptions: {
position: window.qq.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.qq.maps.drawing.OverlayType.POLYLINE,
]
},
// 绘制polyline的属性
polylineOptions: {
strokeLinecap: 'square',// 折线末端线帽的样式，圆形为round（默认），方形为square，平直为butt。
strokeColor: new window.qq.maps.Color(0,0,0,1),
strokeWeight: 5,
strokeDashStyle: 'solid',// 折线的形状。实线是solid，虚线是dash。
clickable: true,// 折线是否可点击
editable: true,
},
snapMode: true,
});
drawingManager.setMap(map);
// 绘制完成
this.getDistance(event.getPath().elems);
this.\$emit('saveLatLng',event.getPath().elems, this.distanceDraw, zoomLevel);
drawingManager.setDrawingMode(null);// 清除绘制模式
this.lines = event;
polyline = null;
})
},

• 计算路径的实际距离
``````getDistance(paths) {
let distance = 0;
let startPoint = new window.TMap.LatLng(paths[0].lat, paths[0].lng);
let endPoint = '';
for(let i = 1;i < paths.length; i++){
endPoint = new window.TMap.LatLng(paths[i].lat, paths[i].lng);
let path = [startPoint, endPoint];
distance += window.TMap.geometry.computeDistance(path);
startPoint = endPoint;
}
this.distanceDraw = (distance / 1000).toFixed(2);
},

2.重新绘制

• 删除初始化多边形，即重新绘制
``````delPolygon() {
if(polyline){
polyline.setMap(null);
}else{
this.lines.setMap(null);
}
this.getDrawMan();
this.distanceDraw = 0;
this.\$emit('saveLatLng',[], '0', zoomLevel);
},

3.编辑回显线路，修改线路

• 绘制线路，新增，修改，删除节点
``````getLine(path){
polyline = new window.qq.maps.Polyline({
path: path,// 折线的路径，以经纬度坐标数组构成
strokeColor: '#000',
strokeWeight: 5,
map: map,// 要显示折线的地图
clickable: true,// 折线是否可点击
editable: !this.disabled,// 启动编辑功能后，可拖动端点对折线进行调整，双击节点可删除
zIndex: 1000,
});
let _this = this;
// 新增节点
_this.getDistance(event.path.elems);
_this.\$emit('saveLatLng',event.path.elems, this.distanceDraw, zoomLevel);
});
// 移动节点
_this.getDistance(event.path.elems);
_this.\$emit('saveLatLng',event.path.elems, this.distanceDraw, zoomLevel);
});
// 删除节点
_this.getDistance(event.path.elems);
_this.\$emit('saveLatLng',event.path.elems, this.distanceDraw, zoomLevel);
});
},

二.绘制点

1.绘制点

• 地图初始化
``````init() {
map = new window.qq.maps.Map(document.getElementById('mapItem'), {
center: new window.qq.maps.LatLng(this.latitude,this.longitude),
zoom: 13, // 设置地图缩放级别
scaleControl: true,//启用比例尺
scaleControlOptions: {
// 设置控件位置相对右下角对齐，向左排列
position: window.qq.maps.ControlPosition.BOTTOM_RIGHT
},
scrollwheel: false,
zoomControl: true,
// 设置缩放控件的位置和样式
zoomControlOptions: {
// 设置缩放控件的位置为相对左方中间位置对齐.
position: window.qq.maps.ControlPosition.TOP_LEFT,
// 设置缩放控件样式为仅包含放大缩小两个按钮
style: window.qq.maps.ZoomControlStyle.LARGE
},
panControl: true,// 平移控件
mapTypeControl: false,// 默认是地图和卫星
});
zoomLevel = map.getZoom();
});
// 添加dom监听事件
if(!marker){
}
marker.setPosition(event.latLng);
this.\$emit('saveLatLng',event.latLng, zoomLevel);
});
if(this.latLng.latitude !== '' && this.latLng.latitude !== null) {
let location = new window.qq.maps.LatLng(this.latLng.latitude,this.latLng.longitude);
marker.setPosition(location);
}
},

2.重新绘制

• 删除标记
``````// 删除标记
deleteOverlays(flag) {
if (markerArray) {
for (let i in markerArray) {
markerArray[i].setMap(null);
}
marker = null;
markerArray.length = 0;
if(flag == 1){
this.\$emit('saveLatLng',null, zoomLevel);
}
}else {
this.\$message({
message: '删除失败，请先标记一个位置',
type: 'error',
});
}
},

3.编辑回显点，修改点

• 添加标记
``````// 添加标记
marker = new window.qq.maps.Marker({
icon: new window.qq.maps.MarkerImage(
require('@/assets/images/marker_blue.png'),new window.qq.maps.Size(50, 50)),
position: location,
map: map
});
markerArray = [marker];
},