項目中使用地圖的場景比較多，將常用的功能整理一下，方便後期使用。
目錄
1.地圖的引入
高德地圖需要我們在項目最外層引入，也就是在public/index.html中直接引入。代碼如下
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>
其中將key的內容替換爲高德的開發者key（高德地圖開發者key申請），註冊一個即可。
2.地圖在頁面顯示
想要地圖在頁面上顯示出來，需要一個承載地圖的容器--div，代碼如下
<div class="map" id="i-map" ref="map"></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; i<mainPointArr.length - 1; i++) {//找到關鍵點
waysLngLatObj.push([mainPointArr[i][0], mainPointArr[i][1]]);
}
driving.search(mainPointArr[0], mainPointArr[mainPointArr.length - 1], {waypoints: waysLngLatObj})
});
6.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後面追加即可，例如
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey&plugin=AMap.MarkerClusterer,AMap.MouseTool,AMap.Autocomplete,AMap.CircleEditor,AMap.RectangleEditor,AMap.PolyEditor,AMap.Driving,AMap.Geocoder"></script>
plugin後面的都是它的插件。