高德地圖是非常方便的插件可以在地圖上添加點標記標記內容
首先要在頁面引入高德地圖
<script src="https://webapi.amap.com/maps?v=1.4.13&key=您申請的key值"></script>
添加盛放地圖的div
<div class="添加寬高、位置的樣式" id="container"></div>
key值的獲取請看文章：https://www.cnblogs.com/tzwbk/p/12557353.html
添加script標簽
var map = new AMap.Map('container', {
resizeEnable: false, //false就是使活動工作簿窗口無最大化按鈕
zoom:14, //比例尺
center: [115.78, 38.68], //地圖首先顯示的坐標
viewMode:'3D'//使用3D視圖
});
這就是高德地圖的基本制作流程
下面咱們來添加點標記
依舊在script標簽內
var marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",//點標記的圖片缺省值為高德默認圖片
position: [115.78, 38.68]//經緯度
});
map.add(marker);//添加點標記
//如果要刪除點標記的話
map.remove(marker);
點標記可以是一個數組來添加多個點標記添加或刪除的時候可以直接將marker替換為數組名
也可以添加從一個地點到另一個地點的折線
var path = [
new AMap.LngLat(116.368904,39.913423),
new AMap.LngLat(116.382122,39.901176),
new AMap.LngLat(116.387271,39.912501),
new AMap.LngLat(116.398258,39.904600)
];
var polyline = new AMap.Polyline({
path: path, //設置折線的節點數組
isOutline: true, //線條是否帶描邊，默認false
outlineColor: '#ffeeff',//線條描邊顏色，此項僅在isOutline為true時有效，默認：#000000
borderWeight: 3, //描邊的寬度，默認為1
strokeColor: "#3366FF", //線條顏色，使用16進制顏色代碼賦值。默認值為#006600
strokeOpacity: 1, //線條透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認為0.9
strokeWeight: 6, //線條寬度，單位：像素
// 折線樣式還支持 'dashed'
strokeStyle: "solid", //線樣式，實線:solid，虛線:dashed
// strokeStyle是dashed時有效
strokeDasharray: [10, 5],//勾勒形狀輪廓的虛線和間隙的樣式，此屬性在strokeStyle 為dashed 時有效
lineJoin: 'round', //折線拐點的繪制樣式，默認值為'miter'尖角，其他可選值：'round'圓角、'bevel'斜角
lineCap: 'round', //折線兩端線帽的繪制樣式，默認值為'butt'無頭，其他可選值：'round'圓頭、'square'方頭
zIndex: 50, //折線覆蓋物的疊加順序。默認疊加順序，先添加的線在底層，后添加的線在上層。通過該屬性可調整疊加順序，使級別較高的折線覆蓋物在上層顯示默認zIndex：50
});
// 將折線添加至地圖實例
map.add(polyline);
也可以更改地圖中心點
function Change(){
map.setZoomAndCenter(13, [115.32 ,38.95]);//第一個屬性是比例尺，第二個屬性是經緯度
}
觸發該方法更改地圖中心點
原文鏈接：https://blog.csdn.net/qq_43750358/article/details/88675173