高德地图是非常方便的插件可以在地图上添加点标记标记内容
首先要在页面引入高德地图

<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