VUE学习（六） 高德地图常用功能总结
项目中使用地图的场景比较多，将常用的功能整理一下，方便后期使用。
目录
1.地图的引入
2.地图在页面显示
3.点标记
3.1快速点标记
3.2点标记详细配置
4.圆形、方形、多边形标记
4.1创建圆形
4.2创建多边形
4.3创建长方形
5.地图操作
5.1清空地图
5.2清空单个图形对象
5.3地图最佳视野调整
5.4地图点击事件
6.路径规划
6.1已知起点终点，自动规划
6.2手动在地图上点击起点和终点
1.地图的引入
高德地图需要我们在项目最外层引入，也就是在public/index.html中直接引入。代码如下
其中将key的内容替换为高德的开发者key（高德地图开发者key申请），注册一个即可。
2.地图在页面显示
想要地图在页面上显示出来，需要一个承载地图的容器--div，代码如下
初始化地图组件
mounted() {
this.map = new AMap.Map('i-map')
},一定要用id来注册地图组件，注册成功后，就可以使用this.map来操作的图了。通过上述操作，地图并未在页面展示，因为我们只声明了一个div并未给它高度，需要定义地图的高度，宽度自适应即可。下面是CSS代码
.map
width 100%
height 500px这样，地图就出来了。
3.点标记
3.1快速点标记
常用的场景就是显示某一坐标的位置。
markerPoint(iconUrl, lnglat) {
let marker = new AMap.Marker({
icon: iconUrl,
position: lnglat
});
marker.setMap(this.map);
},iconUrl:需要展示的图标路径
lnglat:坐标的位置。//[x,y]
3.2点标记详细配置
markerPoint(iconUrl, lnglat) {
let marker = new AMap.Marker({
icon: new AMap.Icon({
size: new AMap.Size(14, 34),//图标大小
image: iconUrl,
imageSize: new AMap.Size(14, 34)//图片大小
}),
angle: 80,//角度
offset: new AMap.Pixel(-7, -17),//图标偏移
position: lnglat
});
marker.setMap(this.map);
},通过上述代码，可以对图像进行相应的移动，使图像在目标点的合适位置展示。
4.圆形、方形、多边形标记
针对上述功能，本地对高德的接口稍作封装。
//创建圆形对象
//center:圆心坐标{lng:123,lat:41}
//radius：半径，单位（米）
//option:圆形的样式
export function createCircle(center,radius,option) {
return new AMap.Circle({
center: [center.lng, center.lat],
radius: radius, //半径
...option
});
}
//创建多边形对象
//path:多边形的路径[[x1,y1],[x2,y2],[x3,y3]......]
//option:多边形的样式
export function createPolygon(path,option) {
return new AMap.Polygon({
path: path,
...option
});
}
//创建长方形对象
//let southWest = new AMap.LngLat(x1, y1);
//let northEast = new AMap.LngLat(x2, y2);
//let bounds = new AMap.Bounds(southWest, northEast);
export function createRectangle(bounds,option) {
return new AMap.Rectangle({
bounds: bounds,
...option
})
}
公共样式可以如下，也可以根据实际情况自定义，具体参考高德的api文档。
publicShapeStyle: {
strokeOpacity: 1,
strokeWeight: 3,
fillColor: "ee2200",
cursor: 'pointer',
fillOpacity: 0.35//透明度
},4.1创建圆形
let circle = createCircle([x1,y1], 200, this.publicShapeStyle);
circle.setMap(this.map);
4.2创建多边形
let polygonPath = [];
shape.list.forEach(p => {//shape.list是多边形的点列表
polygonPath.push([p.lng, p.lat]);
})
let polygon= createPolygon(polygonPath, this.publicShapeStyle)
polygon.setMap(this.map);
4.3创建长方形
let southWest = new AMap.LngLat(shape.southWest.lng, shape.southWest.lat);//shape.southWest和shape.northEast是长方形的左上角和右下角的坐标 let northEast = new AMap.LngLat(shape.northEast.lng, shape.northEast.lat); let bounds = new AMap.Bounds(southWest, northEast); let rectangle = createRectangle(bounds, this.publicShapeStyle);
rectangle.setMap(this.map);
5.地图操作
5.1清空地图
this.map.clearMap();
5.2清空单个图形对象
this.map.remove(shape)//shape是需要删除的图形对象
5.3地图最佳视野调整
有两种方式实现，基本原理类似。
方式一：
this.shapeArr = [];//这个数组存放需要显示的图形对象
this.map.setFitView(this.shapeArr)
方式二：
this.map.add(new AMap.Polyline({ path }))//直接将图像加入地图图层，括号里可以是任何图形对象
this.map.setFitView()
5.4地图点击事件
this.map.on("click", (e)=> {
//这里处理点击的逻辑
});
由于该事件属于监听事件，建议放在mounted()方法中。除了点击事件，还有双击，右键等其他事件，用法类似
6.路径规划
6.1已知起点终点，自动规划
let mainPointArr = item.routes;//关键点的数组，其中包括起点和终点，也有可能包含途径点。
let that = this;
let waysLngLatObj = [];
this.map.plugin('AMap.Driving', function () {
var driving = new AMap.Driving({
map: that.map,
policy: AMap.DrivingPolicy.LEAST_TIME,//这是规划策略，类似导航的时间最短、距离最短、不走高速等，具体看官网
showTraffic: false,
polyOptions: {strokeColor: "#00AA00"}
});
for(var i=1; i6.2手动在地图上点击起点和终点
首先监听地图的点击事件
mounted() {
this.map = new AMap.Map('i-map');//加载地图
this.map.on("click", (e)=> {
let iconUrl = "";
let path=[];
switch (this.pointIndex) {//定义一个计数器
case 0:
iconUrl = this.$store.state.BASE_URL + "imgs/start.png";//起点图片
this.startLngLat = [e.lnglat.lng, e.lnglat.lat];
this.markerPoint(iconUrl, this.startLngLat);
this.pointIndex ++;
break;
case 1:
iconUrl = this.$store.state.BASE_URL + "imgs/end.png";//终点图片
this.markerPoint(iconUrl, [e.lnglat.lng, e.lnglat.lat]);
this.pointIndex ++;
path.push(this.startLngLat)
path.push([e.lnglat.lng, e.lnglat.lat])
this.getRoute(path);//点击完终点后调取高德的路径规划方法
break;
default:
break;
}
});
},涉及到的方法
methods: {
toDraw(){//可以给页面一个按钮，这个是点击事件，点击按钮后开始标定起点和终点
this.pointIndex=0;
this.dragRoute = null;//规划的路径
this.map.clearMap();
},
markerPoint(iconUrl, lnglat) {//画起点和终点的方法
var marker = new AMap.Marker({
icon: iconUrl,
position: lnglat
});
marker.setMap(this.map);
this.markerArr.push(marker)
if(this.markerArr.length==2){//画完起点和终点后高德会自动生成起点和终点图标，所以原来的图标要删除
this.markerArr
this.map.remove(this.markerArr[0]);
this.map.remove(this.markerArr[1]);
this.markerArr = [];
}
},
getRoute(path) {//路径规划
let that = this;
this.map.plugin("AMap.DragRoute", function() {
that.dragRoute = new AMap.DragRoute(that.map, path, AMap.DrivingPolicy.LEAST_TIME,{
showTraffic: false,
polyOptions: {strokeColor: "#00AA00"}
}); //构造拖拽导航类
AMap.event.addListener(that.dragRoute, "complete", function () {
var def = that.dragRoute.getRoute();
if(def.length > 0) {
that.formData.definition = that.dragRoute.getRoute();
}
});
that.dragRoute.search(); //查询导航路径并开启拖拽导航
});
}
},7.备注
以上功能有些需要引入高德地图的插件，引入方式直接在引入高德的js后面追加即可，例如
plugin后面的都是它的插件。