高德地图 JS API for Javascript 入门

霖龍發表於 2023-11-20 16:49:00

<h3>一、官方文档</h3>
地址：https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113153221271-995909513.png" alt="" width="756" height="436" loading="lazy">
JS API 示例：https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/map-show
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114104848208-220656545.png" alt="" width="753" height="441" loading="lazy">
<h3>二、申请高德开放平台的账号</h3>
1、注册
地址：https://lbs.amap.com/
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113152027764-661017039.png" alt="" width="763" height="442" loading="lazy">
点击注册
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113152108747-231362451.png" alt="" width="757" height="452" loading="lazy">
2、创建应用并申请key
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114103713875-172572887.png" alt="" width="548" height="145" loading="lazy">
<h3>三、快速入门</h3>
1、安装
<div class="cnblogs_code">
<pre>npmi @amap/amap-jsapi-loader</pre>
</div>
安装完成之后，package.json中如下所示：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113155537910-1970298208.png" alt="" width="367" height="149" loading="lazy">
2、封装成组件
如果您的项目是使用 Vue 框架，建议您将地图的初始化封装成组件，这样更便于使用 Vue 组件的生命周期来加载、创建和销毁地图。
在components目录下新建MapContainer.vue组件
（1）、引入
<div class="cnblogs_code">
<pre>import AMapLoader from "@amap/amap-jsapi-loader";</pre>
</div>
（2）、mounted中加载地图
<div class="cnblogs_code">
<pre>window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 });
 })
 .catch((e) => {
 console.log(e);
 });</pre>
</div>
注意：使用1.4.15版本，如果使用2.0版本，有些配置不会生效。
MapContainer.vue组件完整代码如下：
<div class="cnblogs_code">
<pre><template>
<div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
name: "map-view",
mounted() {
this.initAMap();
},
unmounted() {
this.map?.destroy();
},
methods: {
initAMap() {
 window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 });
 })
 .catch((e) => {
 console.log(e);
 });

},
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 600px;
}
</style></pre>
</div>
（3）、HomeView.vue引入组件
<div class="cnblogs_code">
<pre>import Mapview from "./components/MapContainer.vue"</pre>
</div>
（4）、注册组件
<div class="cnblogs_code">
<pre>components: {
Mapview
}</pre>
</div>
（5）、使用组件
<div class="cnblogs_code">
<pre><Mapview></Mapview></pre>
</div>
HomeView.vue完整代码如下：
<div class="cnblogs_code">
<pre><template>
<div class="home">
<Mapview></Mapview>
</div>
</template>

<script>
import Mapview from "../components/MapContainer.vue"

export default {
name: 'HomeView',
components: {
Mapview
}
}
</script></pre>
</div>
效果如下:
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114104543333-1070526728.png" alt="" width="769" height="369" loading="lazy">
注意：初始化加载地图的时候，调用方法应该写在mounted而不是created中。
隐藏地图左下角的高德地图和版权信息：
找到这个项目的index.html文件，加入如下这段代码
<div class="cnblogs_code">
<pre><style type="text/css">
 .amap-logo{
 display: none;
 opacity:0 !important;
 }
 .amap-copyright {
 opacity:0;
 }
</style></pre>
</div>
地图属性设置
（1）、初始设置光标为小手
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 defaultCursor:'pointer',
 });</pre>
</div>
设置为其他样式
<div class="cnblogs_code">
<pre>this.map.setDefaultCursor("default");
this.map.setDefaultCursor("pointer");
this.map.setDefaultCursor("move");
this.map.setDefaultCursor("crosshair");</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114171131647-717394037.png" alt="" width="56" height="135" loading="lazy">
（2）、中英文地图
切换成引文地图
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 lang: "en", //可选值：en，zh_en, zh_cn
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 });</pre>
</div>
如下所示：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114105132391-1455977035.png" alt="" width="817" height="397" loading="lazy">
（3）、设置初始地图中心的center和初始缩放级别zoom
zoom级别越大，显示的范围越小。例如，级别19对应的比例尺是20米，而级别1对应的比例尺是10000公里。
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 zoom: 11, // 初始化地图级别
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 });</pre>
</div>
获取zoom和center
<div class="cnblogs_code">
<pre>var zoom = this.map.getZoom(); //获取当前地图级别
var center = this.map.getCenter(); //获取当前地图中心位置
console.log(zoom)
console.log(center)</pre>
</div>
结果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114162146094-1228221164.png" alt="" width="212" height="125" loading="lazy">
设置缩放级别
<div class="cnblogs_code">
<pre>var zoom = Math.floor(Math.random() * 7) + 11; //zoom范围
this.map.setZoom(zoom); //设置地图层级
console.info(`当前层级已设为${zoom}级`);</pre>
</div>
设置地图中心
<div class="cnblogs_code">
<pre>var lng = 114.31667 + Math.floor(Math.random() * 589828) / 1e6; //经度范围
var lat = 30.51667 + Math.floor(Math.random() * 514923) / 1e6; //纬度范围
this.map.setCenter(); //设置地图中心点
console.info(`当前中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);</pre>
</div>
结果：当前中心点已设为 114.737333,30.934945
同时设置zoom和center
<div class="cnblogs_code">
<pre>var zoom = Math.floor(Math.random() * 7) + 11;
var lng = 121.138398 + Math.floor(Math.random() * 589828) / 1e6;
var lat = 30.972688 + Math.floor(Math.random() * 514923) / 1e6;
this.map.setZoomAndCenter(zoom, ); //同时设置地图层级与中心点
console.info(`当前层级已设为${zoom}级，中心点已设为 ${lng.toFixed(6)},${lat.toFixed(6)}`);</pre>
</div>
结果：当前层级已设为14级，中心点已设为 121.213062,31.435657
（4）、交互属性
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式// lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
 resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });</pre>
</div>
（5）、地图控件比例尺和工具条
<div class="cnblogs_code">
<pre>this.map.addControl(new AMap.ToolBar()) // 工具条
this.map.addControl(new AMap.Scale()) // 比例尺
this.map.addControl(new AMap.OverView()); // 鹰眼</pre>
</div>
效果如下:
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114173540308-1848162764.png" alt="" width="797" height="383" loading="lazy">
（6）、获取/设置地图显示范围
获取
<div class="cnblogs_code">
<pre>var bounds = this.map.getBounds();
console.log(bounds)</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114164135326-109755331.png" alt="" width="519" height="227" loading="lazy">
设置
<div class="cnblogs_code">
<pre>this.map.on("click", function () {
 var mybounds = new AMap.Bounds([114.398137, 30.51537], [114.43788,30.513435]);
 that.map.setBounds(mybounds);
 });</pre>
</div>
当在地图上单击，就会进入设置的显示范围。
（7）、获取鼠标经纬度
展示经纬度
<div class="cnblogs_code">
<pre><template>
<div>
<div class="input-card">
 <h4>左击获取经纬度：</h4>
 <div class="input-item">
 <input type="text" readonly="true" id="lnglat">
 </div>
</div>
<div id="container"></div>
</div>
</template></pre>
</div>
单击地图获取经纬度
<div class="cnblogs_code">
<pre>this.map.on('click', function(e) {
 document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
 });</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114165223940-1351117675.png" alt="" width="797" height="396" loading="lazy">
（8）、地图的热点弹框
<div class="cnblogs_code">
<pre>initAMap() {
 window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.AutoComplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor','AMap.RangingTool','AMap.MouseTool','AMap.Bounds','AMap.AdvancedInfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 // resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
 resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var placeSearch = new AMap.PlaceSearch();//构造地点查询类
 this.infoWindow=new AMap.AdvancedInfoWindow({});
 this.map.on('hotspotover', function(result) {
 placeSearch.getDetails(result.id, function(status, result) {
 if (status === 'complete' && result.info === 'OK') {
 that.placeSearch_CallBack(result);
 }
 });
 });
 })
 .catch((e) => {
 console.log(e);
 });

},
placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
 var poiArr = data.poiList.pois;
 var location = poiArr[0].location;
 this.infoWindow.setContent(this.createContent(poiArr[0]));
 this.infoWindow.open(this.map,location); // 设置弹框的定位
},
createContent(poi) {//信息窗体内容
 var s = [];
 s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
 s.push("电话：" + poi.tel);
 s.push("类型：" + poi.type);
 s.push('<div>');
 return s.join(" ");
},
 </pre>
</div>
样式：
<div class="cnblogs_code">
<pre>.info-title{
font-weight: bolder;
color: #fff;
font-size: 14px;
line-height: 26px;
padding: 0 0 0 6px;
background: #25A5F7
}
.info-content{
padding: 4px;
color: #666666;
line-height: 23px;
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
}
.info-content img{
float: left;
margin: 3px;
}
.amap-info-combo .keyword-input {
height: auto;
}</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114170048252-1176332217.png" alt="" width="781" height="373" loading="lazy">
<h3>四、点标记Marker</h3>
1、点标记Marker和Icon 
（1）、简单点标记
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 // 设置地图容器id
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 zoom: 11, // 初始化地图级别
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 }); 　　　　 var marker1 = new AMap.Marker({
 position:new AMap.LngLat(114.31667, 30.51667),
 title:'武汉市',
 });
 this.map.add();</pre>
</div>
效果如下:
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113173906476-1556861522.png" alt="" width="766" height="392" loading="lazy">
当没有设置Icon时，默认为蓝色图钉图片
删除Marker
<div class="cnblogs_code">
<pre>this.map.remove(marker1);</pre>
</div>
隐藏地图点标记
<div class="cnblogs_code">
<pre>//隐藏点标记的图片
.map-right ::v-deep .amap-container .amap-marker img{
display: none;
}
.map-right ::v-deep .amap-container .amap-marker .amap-marker-label{
border: none;
background-color: transparent;
font-size: 14px;
font-weight: bold;
color: white;
}</pre>
</div>
 
（2）、复杂点标记
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 // 设置地图容器id
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 });

 let icon = new AMap.Icon({
 size: new AMap.Size(25, 34), // 图标尺寸
 image: require('@/assets/logo.png'), // 图标的取图地址。默认为蓝色图钉图片
 imageSize: new AMap.Size(20, 20), // 取图大小
 imageOffset: new AMap.Pixel(0,0) // 图标或取图偏移量
 });
 var marker1 = new AMap.Marker({
 icon: icon,
 position:new AMap.LngLat(114.31667, 30.51667),
 title:'武汉市',
 offset: new AMap.Pixel(-13, -30)
 });
 this.map.add();</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113174210082-1017411777.png" alt="" width="541" height="395" loading="lazy">
（3）、添加文本标注
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 // 设置地图容器id
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 });

 let icon = new AMap.Icon({
 size: new AMap.Size(25, 34), // 图标尺寸
 image: require('@/assets/logo.png'), // 图标的取图地址。默认为蓝色图钉图片
 imageSize: new AMap.Size(20, 20), // 取图大小
 imageOffset: new AMap.Pixel(0,0) // 图标或取图偏移量
 });
 var marker1 = new AMap.Marker({
 icon: icon,
 position:new AMap.LngLat(114.31667, 30.51667),
 title:'武汉市',
 offset: new AMap.Pixel(-13, -30),
 zoom: 13
 });

 const content = `<div style="width:auto">武汉市</div>`
 marker1.setLabel({
 content:content,
 offset:new AMap.Pixel(20,-16),
 direction: 'top'
 })

 this.map.add();
 // this.map.remove(marker1);</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231113175308150-139660429.png" alt="" width="501" height="434" loading="lazy">
（4）、监听鼠标单击事件并设置点标记
<div class="cnblogs_code">
<pre>initAMap() {
 window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 this.map.addControl(new AMap.ToolBar())
 this.map.addControl(new AMap.Scale())

 // 监听鼠标点击事件
 this.map.on("click", this.clickMapHandler);
 })
 .catch((e) => {
 console.log(e);
 });

},
// 点击地图事件获取经纬度，并添加标记
 clickMapHandler(e) {
 let marker = new AMap.Marker({
 position: ,
 });
 marker.setMap(this.map);
},</pre>
</div>
当用鼠标点击地图任意位置时，都会产生标记，效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114143402591-603772579.png" alt="" width="729" height="348" loading="lazy">
（5）、使用工具类MouseTool打点
<div class="cnblogs_code">
<pre>window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.AutoComplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor','AMap.RangingTool','AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.marker({
 //同Marker的Option设置
 });

 })
 .catch((e) => {
 console.log(e);
 });</pre>
</div>
<h3>四、海量点</h3>
1、海量点标记
代码
<div class="cnblogs_code">
<pre><template>
<div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
name: "map-view",
mounted() {
this.initAMap();
},
unmounted() {
this.map?.destroy();
},
methods: {
initAMap() {
 window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 center: [116.397428, 39.90923], // 初始化地图中心点位置
 zoom: 12, //地图级别
 });
 var data = [
 {
 lnglat: [116.397455,39.909187], //经纬度
 name: "天安门",
 },
 {
 lnglat: [116.402394,39.937182],
 name: "南锣鼓巷",
 },
 {
 lnglat: [116.427377,39.902717],
 name: "北京站",
 },
 {
 lnglat: [116.315457,39.959982],
 name: "北京理工大学",
 },
 //, …,{}, …
 ];
 var style = {
 url: "//vdata.amap.com/icons/b18/1/2.png", //图标地址
 size: new AMap.Size(11, 11), //图标大小
 anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
 };
 var massMarks = new AMap.MassMarks(data,{
 zIndex: 5, //海量点图层叠加的顺序
 zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
 style: style, //设置样式对象
 });
 massMarks.setMap(this.map);

 }).catch((e) => {
 console.log(e);
 });

},
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 100vh;
}
</style></pre>
</div>
效果：
<img src="https://img2024.cnblogs.com/blog/2138872/202403/2138872-20240325101445666-1107969089.png" alt="" width="569" height="334" loading="lazy">
如果想为海量点添加多种点样式，可以将多个样式对象放在数组Array里。
<div class="cnblogs_code">
<pre><template>
<div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
name: "map-view",
mounted() {
this.initAMap();
},
unmounted() {
this.map?.destroy();
},
methods: {
initAMap() {
 window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 center: [116.397428, 39.90923], // 初始化地图中心点位置
 zoom: 12, //地图级别
 });
 var data = [
 {
 lnglat: [116.402394,39.937182],
 name: "南锣鼓巷",
 style: 0
 },
 {
 lnglat: [116.427377,39.902717],
 name: "北京站",
 style: 1
 },
 {
 lnglat: [116.315457,39.959982],
 name: "北京理工大学",
 style: 2
 },
 ];
 //创建样式对象,JS API 2.0支持显示设置 zIndex, zIndex 越大约靠前，默认按顺序排列
 var style = [
 {
 url: "https://a.amap.com/jsapi_demos/static/images/mass0.png", //图标地址
 anchor: new AMap.Pixel(6, 6), //图标显示位置偏移量，基准点为图标左上角
 size: new AMap.Size(11, 11), //图标的尺寸
 zIndex: 1, //每种样式图标的叠加顺序，数字越大越靠前
 },
 {
 url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
 anchor: new AMap.Pixel(4, 4),
 size: new AMap.Size(11,11),
 zIndex: 2,
 },
 {
 url: "//vdata.amap.com/icons/b18/1/2.png", //图标地址
 anchor: new AMap.Pixel(4, 4),
 size: new AMap.Size(11,11),
 zIndex: 3,
 },
 ];
 var massMarks = new AMap.MassMarks(data,{
 zIndex: 5, //海量点图层叠加的顺序
 zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
 style: style, //设置样式对象
 });
 massMarks.setMap(this.map);

 }).catch((e) => {
 console.log(e);
 });

},
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 100vh;
}
</style></pre>
</div>
效果如下：
<img src="https://img2024.cnblogs.com/blog/2138872/202404/2138872-20240407154552290-1261241964.png" alt="" width="526" height="368" loading="lazy">
单击海量点放大显示
<div class="cnblogs_code">
<pre><template>
<div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
let that
export default {
name: "map-view",
mounted() {
this.initAMap();
},
unmounted() {
this.map?.destroy();
},
data() {
return {
 lightMark:null,
}
},
created() {
that=this
},
methods: {
initAMap() {
 window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 center: [116.397428, 39.90923], // 初始化地图中心点位置
 zoom: 12, //地图级别
 });
 var data = [
 {
 lnglat: [116.402394,39.937182],
 name: "南锣鼓巷",
 style: 0,
 type: "商圈"
 },
 {
 lnglat: [116.427377,39.902717],
 name: "北京站",
 style: 1,
 type: "火车站"
 },
 {
 lnglat: [116.315457,39.959982],
 name: "北京理工大学",
 style: 2,
 type: "大学"
 },
 ];
 //创建样式对象,JS API 2.0支持显示设置 zIndex, zIndex 越大约靠前，默认按顺序排列
 var style = [
 {
 url: "https://a.amap.com/jsapi_demos/static/images/mass0.png", //图标地址
 anchor: new AMap.Pixel(6, 6), //图标显示位置偏移量，基准点为图标左上角
 size: new AMap.Size(11, 11), //图标的尺寸
 zIndex: 1, //每种样式图标的叠加顺序，数字越大越靠前
 },
 {
 url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
 anchor: new AMap.Pixel(4, 4),
 size: new AMap.Size(11,11),
 zIndex: 2,
 },
 {
 url: "https://vdata.amap.com/icons/b18/1/2.png", //图标地址
 anchor: new AMap.Pixel(4, 4),
 size: new AMap.Size(11,11),
 zIndex: 3,
 },
 ];
 var massMarks = new AMap.MassMarks(data,{
 zIndex: 5, //海量点图层叠加的顺序
 zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
 style: style, //设置样式对象
 });
 // 海量点单击事件
 massMarks.on('click', function(event) {
 let data = event.data;
 that.highlight(data);
 });
 massMarks.setMap(this.map);

 }).catch((e) => {
 console.log(e);
 });

},
highlight(data){
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 let image;
 if(data.type == "商圈"){
 image = 'https://a.amap.com/jsapi_demos/static/images/mass0.png';
 }else if(data.type == "火车站"){
 image = 'https://a.amap.com/jsapi_demos/static/images/mass1.png';
 }else if(data.type == "大学"){
 image = 'https://vdata.amap.com/icons/b18/1/2.png';
 }
 let icon = new AMap.Icon({
 image: image,
 imageSize: new AMap.Size(30, 30)
 });
 this.lightMark = new AMap.Marker({
 position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
 offset: new AMap.Pixel(-15, -15),
 icon: icon,
 title: data.name
 });
 this.map.add(this.lightMark);

 }).catch((e) => {
 console.log(e);
 });
}
},
};
</script>
<style scoped>
#container {
width: 100%;
height: 100vh;
}
</style></pre>
</div>
效果如下：
<img src="https://img2024.cnblogs.com/blog/2138872/202404/2138872-20240430100959929-305773774.gif" alt="" loading="lazy">
 
<h3>五、圆与椭圆</h3>
2、画圆
<div class="cnblogs_code">
<pre>var circle = new AMap.Circle({
 center: new AMap.LngLat("114.31667", "30.51667"), // 圆心位置
 radius: 10000,//半径
 strokeColor: "#F33",//线颜色
 strokeOpacity: 1,//线透明度
 strokeWeight: 3,//线粗细度
 fillColor: "#ee2200",//填充颜色
 fillOpacity: 0.35 //填充透明度
 });
 this.map.add();</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114115649037-914057248.png" alt="" width="767" height="371" loading="lazy">
删除圆
<div class="cnblogs_code">
<pre>this.map.remove(circle);</pre>
</div>
注意：删除覆盖物时，由于覆盖物是先放到数组中，再加载到地图的，所以再删除上一个覆盖物时，要删除覆盖物所在的数组，而不是删除覆盖物。
例子如下：
比如：画圆如下：
<div class="cnblogs_code">
<pre>this.lightCircle = new AMap.Circle({
 center: center,
 radius: radiusValue,
 strokeColor: circleStrokeColor,
 strokeOpacity: 1,
 strokeWeight: 1,
 fillColor: circleColor,
 fillOpacity: 0.35
 });
this.circleGraphics1.push(this.lightCircle);
this.map.add(this.circleGraphics1);</pre>
</div>
那么删除圆时，要删除circleGraphics1数组，而不是删除lightCircle，删除lightCircle会失效。
<div class="cnblogs_code">
<pre>if (this.circleGraphics1.length > 0) {
 this.map.remove(this.circleGraphics1);
 this.circleGraphics1 = [];
 }</pre>
</div>
3、使用工具类MouseTool画圆
<div class="cnblogs_code">
<pre>window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.AutoComplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor','AMap.RangingTool','AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.circle({
 fillColor:'#00b0ff',
 strokeColor:'#80d8ff'
 //同Circle的Option设置
 });
 })
 .catch((e) => {
 console.log(e);
 });</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114155459668-1075038999.png" alt="" width="727" height="352" loading="lazy">
清除圆
<div class="cnblogs_code">
<pre>this.map.on('click', function(e) {
 mouseTool.close(true)//关闭，并清除覆盖物
 });</pre>
</div>
4、AMap.Ellipse画椭圆
<div class="cnblogs_code">
<pre>var ellipse = new AMap.Ellipse({
 center: [114.398967, 30.505958],
 radius: [ 2000, 1000 ], //半径
 borderWeight: 3,
 strokeColor: "#FF33FF",
 strokeWeight: 6,
 strokeOpacity: 0.2,
 fillOpacity: 0.4,
 // 线样式还支持 'dashed'
 strokeStyle: 'dashed',
 strokeDasharray: [10, 10],
 fillColor: '#1791fc',
 zIndex: 50,
 })

 ellipse.setMap(this.map)
 // 缩放地图到合适的视野级别
 this.map.setFitView([ ellipse ])</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115095032910-1663895720.png" alt="" width="781" height="373" loading="lazy">
<h3>六、使用工具类测距</h3>
官方文档：https://developer.amap.com/demo/javascript-api/example/mouse-operate-map/measure-distance
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114152839983-846854625.png" alt="" width="762" height="447" loading="lazy">
1、使用RangingTool工具类测距-----默认样式测距
<div class="cnblogs_code">
<pre>window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.AutoComplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor','AMap.RangingTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });//默认样式
 var ruler1 = new AMap.RangingTool(this.map);
 ruler1.turnOn();

 })
 .catch((e) => {
 console.log(e);
 });

},</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114152446269-1077664800.png" alt="" width="763" height="368" loading="lazy">
2、使用RangingTool工具类测距-------自定义样式测距
<div class="cnblogs_code">
<pre>//自定义样式
 var startMarkerOptions= {
 icon: new AMap.Icon({
 size: new AMap.Size(19, 31),//图标大小
 imageSize:new AMap.Size(19, 31),
 image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
 })
 };
 var endMarkerOptions = {
 icon: new AMap.Icon({
 size: new AMap.Size(19, 31),//图标大小
 imageSize:new AMap.Size(19, 31),
 image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
 }),
 offset: new AMap.Pixel(-9, -31)
 };
 var midMarkerOptions = {
 icon: new AMap.Icon({
 size: new AMap.Size(19, 31),//图标大小
 imageSize:new AMap.Size(19, 31),
 image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
 }),
 offset: new AMap.Pixel(-9, -31)
 };

 var lineOptions = {
 strokeStyle: "solid",
 strokeColor: "#FF33FF",
 strokeOpacity: 1,
 strokeWeight: 2
 };
 var rulerOptions = {
 startMarkerOptions: startMarkerOptions,
 midMarkerOptions:midMarkerOptions,
 endMarkerOptions: endMarkerOptions,
 lineOptions: lineOptions
 };
 var ruler2 = new AMap.RangingTool(this.map, rulerOptions);
 ruler2.turnOn();</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114152636938-107351844.png" alt="" width="779" height="376" loading="lazy">
3、使用MouseTool工具类测距------MouseTool
<div class="cnblogs_code">
<pre>var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.rule({
 startMarkerOptions: {//可缺省
 icon: new AMap.Icon({
 size: new AMap.Size(19, 31),//图标大小
 imageSize: new AMap.Size(19, 31),
 image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
 })
 },
 endMarkerOptions: {//可缺省
 icon: new AMap.Icon({
 size: new AMap.Size(19, 31),//图标大小
 imageSize: new AMap.Size(19, 31),
 image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
 }),
 offset: new AMap.Pixel(-9, -31)
 },
 midMarkerOptions: {//可缺省
 icon: new AMap.Icon({
 size: new AMap.Size(19, 31),//图标大小
 imageSize: new AMap.Size(19, 31),
 image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
 }),
 offset: new AMap.Pixel(-9, -31)
 },
 lineOptions: {//可缺省
 strokeStyle: "solid",
 strokeColor: "#FF33FF",
 strokeOpacity: 1,
 strokeWeight: 2
 }
 })</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114161108503-99337846.png" alt="" width="774" height="375" loading="lazy">
<h3>七、画多段线polyline</h3>
官方文档位置
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115092758447-1348828232.png" alt="" width="807" height="467" loading="lazy">
<div class="cnblogs_code">
<pre>var path = [
 new AMap.LngLat(114.284631,30.48042),
 new AMap.LngLat(114.367657,30.532678),
 new AMap.LngLat(114.36716,30.453424),
 new AMap.LngLat(114.445712,30.490703)
 ];

 // 创建折线实例
 var polyline = new AMap.Polyline({
 path: path,
 borderWeight: 2, // 线条宽度，默认为 1
 strokeColor: 'red', // 线条颜色
 lineJoin: 'round' // 折线拐点连接处样式
 });

 // 将折线添加至地图实例
 this.map.add(polyline);</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115093225069-1766920436.png" alt="" width="800" height="382" loading="lazy">
删除多段线
<div class="cnblogs_code">
<pre>// 移除一条已创建的折线
this.map.remove(polyline);</pre>
</div>
一次性移除多条已创建的折线
<div class="cnblogs_code">
<pre>var polylines = ;
this.map.remove(polylines);</pre>
</div>
折线的显示与隐藏
<div class="cnblogs_code">
<pre>// 显示一条已创建的 polyline
polyline.show();

// 隐藏一条已创建的 polyline
polyline.hide();</pre>
</div>
2、使用工具类MouseTool画多段线
<div class="cnblogs_code">
<pre>window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.AutoComplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor','AMap.RangingTool','AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.polyline({
 strokeColor:'#80d8ff'
 //同Polyline的Option设置
 });

 })
 .catch((e) => {
 console.log(e);
 });</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114154537354-1633331027.png" alt="" width="769" height="369" loading="lazy">
3、多段线的编辑
<div class="cnblogs_code">
<pre>// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
 var path = [
 new AMap.LngLat(114.284631,30.48042),
 new AMap.LngLat(114.367657,30.532678),
 new AMap.LngLat(114.36716,30.453424),
 new AMap.LngLat(114.445712,30.490703)
 ];

 // 创建折线实例
 var polyline = new AMap.Polyline({
 path: path,
 isOutline: true,
 outlineColor: '#ffeeff',
 borderWeight: 3,
 strokeColor: "#3366FF",
 strokeOpacity: 1,
 strokeWeight: 6,
 // 折线样式还支持 'dashed'
 strokeStyle: "solid",
 // strokeStyle是dashed时有效
 strokeDasharray: [10, 5],
 lineJoin: 'round',
 lineCap: 'round',
 zIndex: 50,
 })

 // 将折线添加至地图实例
 polyline.setMap(this.map)
 // 缩放地图到合适的视野级别
 this.map.setFitView([ polyline ])
 var polyEditor = new AMap.PolyEditor(this.map, polyline)
 polyEditor.open()
 polyEditor.on('addnode', function(event) {
 console.info('触发事件：addnode')
 })

 polyEditor.on('adjust', function(event) {
 console.info('触发事件：adjust')
 })

 polyEditor.on('removenode', function(event) {
 console.info('触发事件：removenode')
 })

 polyEditor.on('end', function(event) {
 console.info('触发事件： end')
 // event.target 即为编辑后的折线对象
 })</pre>
</div>
效果：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115095936007-249581046.png" alt="" width="795" height="381" loading="lazy">
<h3>八、画多边形polygon</h3>
1、AMap.Polygon 对象创建多边形
<div class="cnblogs_code">
<pre>// 多边形轮廓线的节点坐标数组
 var path = [
 new AMap.LngLat(114.378244,30.693383),
 new AMap.LngLat(114.172219,30.626681),
 new AMap.LngLat(114.27127,30.468749),
 new AMap.LngLat(114.45805,30.478506)
 ];

 var polygon = new AMap.Polygon({
 path: path,
 fillColor: '#fff', // 多边形填充颜色
 borderWeight: 2, // 线条宽度，默认为 1
 strokeColor: 'red', // 线条颜色
 });

 this.map.add(polygon);</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115094007139-1633959631.png" alt="" width="788" height="377" loading="lazy">
2、使用工具类MouseTool画多边形
<div class="cnblogs_code">
<pre>window._AMapSecurityConfig = {
 securityJsCode: '安全密钥'
 }
 AMapLoader.load({
 key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
 version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 plugins: ['AMap.AutoComplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor','AMap.RangingTool','AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 }).then((AMap) => {
 this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.polygon({
 fillColor:'#00b0ff',
 strokeColor:'#80d8ff'
 //同Polygon的Option设置
 });
 })
 .catch((e) => {
 console.log(e);
 });</pre>
</div>
效果如下:
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114154750324-1791017223.png" alt="" width="754" height="363" loading="lazy">
2、使用工具类MouseTool画矩形
<div class="cnblogs_code">
<pre>var mouseTool = new AMap.MouseTool(this.map);
 //监听draw事件可获取画好的覆盖物
 var overlays = [];
 mouseTool.on('draw',function(e){
 overlays.push(e.obj);
 })
 mouseTool.rectangle({
 fillColor:'#00b0ff',
 strokeColor:'#80d8ff'
 //同Polygon的Option设置
 });</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114155042663-1419654852.png" alt="" width="763" height="369" loading="lazy">
3、AMap.Rectangle画矩形
<div class="cnblogs_code">
<pre>var southWest = new AMap.LngLat(114.402449, 30.520478)
 var northEast = new AMap.LngLat(114.435461, 30.506198)

 var bounds = new AMap.Bounds(southWest, northEast)

 var rectangle = new AMap.Rectangle({
 bounds: bounds,
 strokeColor:'red',
 strokeWeight: 6,
 strokeOpacity:0.5,
 strokeDasharray: [30,10],
 // strokeStyle还支持 solid
 strokeStyle: 'dashed',
 fillColor:'blue',
 fillOpacity:0.5,
 cursor:'pointer',
 zIndex:50,
 })

 rectangle.setMap(this.map)
 // 缩放地图到合适的视野级别
 this.map.setFitView([ rectangle ])</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115094626084-641976240.png" alt="" width="794" height="380" loading="lazy">
<h3>九、使用工具类MouseTool拉框放大与拉框缩小</h3>
我们一般使用滚轮对地图进行缩放，我们也可以通过拉矩形框的方式对地图进行缩放。
1、拉框放大
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.rectZoomIn({
 strokeColor:'#80d8ff',
 fillColor:'#80d8ff',
 fillOpacity:0.3
 //同 Polygon 的 Option 设置

 });</pre>
</div>
2、拉框缩小
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel:true,
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.rectZoomOut({
 strokeColor:'#80d8ff',
 fillColor:'#80d8ff',
 fillOpacity:0.3
 //同 Polygon 的 Option 设置
 });</pre>
</div>
<h3>十、使用MouseTool工具类测面积</h3>
<div class="cnblogs_code">
<pre>var mouseTool = new AMap.MouseTool(this.map);
 mouseTool.measureArea({
 strokeColor:'#80d8ff',
 fillColor:'#80d8ff',
 fillOpacity:0.3
 //同 Polygon 的 Option 设置
 });</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114161330365-2013295813.png" alt="" width="786" height="380" loading="lazy">
<h3>十一、添加图层</h3>
1、添加卫星图层
<div class="cnblogs_code">
<pre>var satelliteLayer = new AMap.TileLayer.Satellite();
this.map.add(satelliteLayer);</pre>
</div>
效果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231114172755334-1346020157.png" alt="" width="782" height="375" loading="lazy">
删除卫星图层
<div class="cnblogs_code">
<pre>this.map.remove(satelliteLayer);</pre>
</div>
2、添加路网图层
<div class="cnblogs_code">
<pre>var roadNetLayer =new AMap.TileLayer.RoadNet();
this.map.add(roadNetLayer);</pre>
</div>
删除路网图层
<div class="cnblogs_code">
<pre>this.map.remove(roadNetLayer);</pre>
</div>
<h3>十二、坐标系转换</h3>
1、经纬度转成容器像素坐标
<div class="cnblogs_code">
<pre>this.map = new AMap.Map("container", {
 viewMode: "2D", // 是否为3D地图模式
 // resizeEnable: true, // 是否监控地图容器尺寸变化
 // lang: "en", //可选值：en，zh_en, zh_cn
 // zoom: 11, // 初始化地图级别
 // zooms: , //地图允许缩放的层级
 center: [114.31667, 30.51667], // 初始化地图中心点位置
 // defaultCursor:'pointer',
 showLabel: true,
 showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
 resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
 dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
 keyboardEnable: true, //地图是否可通过键盘控制，默认为true
 doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
 zoomEnable: true, //地图是否可缩放，默认值为true
 rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
 });
 this.map.on('click', function(e) {
 var lnglat = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
 var pixel = that.map.lngLatToContainer(lnglat);
 console.log(pixel)
 });</pre>
</div>
结果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115091927931-262946393.png" alt="" width="412" height="83" loading="lazy">
注意引入插件AMapLngLat，且回调函数内不能用this，可改用that。
2、容器像素坐标转成经纬度
<div class="cnblogs_code">
<pre>this.map.on('click', function(e) {
 var lnglat = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
 var pixel = that.map.lngLatToContainer(lnglat);
 console.log(pixel)
 var pixel1 = new AMap.Pixel(pixel.x,pixel.y);
 var lnglat = that.map.containerToLngLat(pixel1);
 console.log(lnglat)
 });</pre>
</div>
结果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231115092327259-693725797.png" alt="" width="684" height="204" loading="lazy">
<h3>十三、驾车路线规划</h3>
驾车路线规划需要使用AMap.Driving插件，获取驾车路线规划一般有两种方式：经纬度 和 搜索关键字。
1、经纬度
通过传入起点和终点的经纬度信息，获取对应的驾车路线规划。
（1）、准备一个panel div容器，放置导航数据，绑定一个唯一的ID
<div class="cnblogs_code">
<pre><div id="panel"></div></pre>
</div>
（2）、构造导航类，输入起点和终点
<div class="cnblogs_code">
<pre>//构造路线导航类
 var driving = new AMap.Driving({
 map: this.map,
 panel: "panel" // 绑定容器 id
 });
 // 根据起终点经纬度规划驾车导航路线
 driving.search(new AMap.LngLat(114.418656, 30.479686), new AMap.LngLat(114.446108, 30.517827), function(status, result) {
 // result 即是对应的驾车导航信息，相关数据结构文档请参考https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
 if (status === 'complete') {
 console.log('绘制驾车路线完成')
 } else {
 console.log('获取驾车数据失败：' + result)
 }
 });</pre>
</div>
结果如下:
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231120145550203-2085803633.png" alt="" width="318" height="377" loading="lazy">
添加途经点
<div class="cnblogs_code">
<pre>var driving = new AMap.Driving({
 map: this.map,
 panel: "panel",
 });
 // 根据起终点经纬度规划驾车导航路线
 driving.search(
 new AMap.LngLat(114.418656, 30.479686),
 new AMap.LngLat(114.446108, 30.517827),
 {
 waypoints: [new AMap.LngLat(114.448668,30.506216)],
 },
 function (status, result) {
 // result 即是对应的驾车导航信息，相关数据结构文档请参考https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
 if (status === "complete") {
 console.log("绘制驾车路线完成");
 } else {
 console.log("获取驾车数据失败：" + result);
 }
 });</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231120152311627-1450482986.png" alt="" width="401" height="365" loading="lazy">
 
2、地点关键字
<div class="cnblogs_code">
<pre>//构造路线导航类
 var driving = new AMap.Driving({
 map: this.map,
 panel: "panel"
 });
 // 根据起终点名称规划驾车导航路线
 driving.search([
 {keyword: '光谷广场',city:'武汉'},
 {keyword: '首创奥特莱斯',city:'武汉'}
 ], function(status, result) {
 // result 即是对应的驾车导航信息，相关数据结构文档请参考https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
 if (status === 'complete') {
 console.log('绘制驾车路线完成')
 } else {
 console.log('获取驾车数据失败：' + result)
 }
 });</pre>
</div>
结果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231120150248524-715585650.png" alt="" width="579" height="388" loading="lazy">
<h3>十四、web服务 API-路径规划</h3>
官方文档：https://lbs.amap.com/api/webservice/guide/api/direction/
路径规划API是一套以HTTP形式提供的步行、公交、驾车查询及行驶距离计算接口，返回JSON 或 XML格式的查询数据，用于实现路径规划功能的开发。 
由于道路/数据/算法的变更，很可能存在间隔一段时间后请求相同起终点的经纬度返回不同结果。
使用说明：
第一步，申请”Web服务API”密钥（Key）；
注意：如果无法返回正常的数据，看是否是因为设置IP白名单。
第二步，拼接HTTP请求URL，第一步申请的Key需作为必填参数一同发送；
第三步，接收HTTP请求返回的数据（JSON或XML格式），解析数据。
<div class="cnblogs_code">
<pre>@RunWith(SpringRunner.class)
@SpringBootTest(classes = ServerApplication.class)
public class gaodeDemo {
@Test
public void test() {
 String mapWebUrl = "https://restapi.amap.com/v5/direction/driving?origin=start&destination=end&show_fields=polyline&key=你的key";
 double startJd = 108.957383;
 double startWd = 38.472747;
 double endJd = 108.884053;
 double endWd = 38.550073;
 String url = mapWebUrl.replace("start",startJd+","+startWd).replace("end",endJd+","+endWd);
 String resultStr = ApiUtils.getRequest(url);
 JSONObject resultObj = JSONObject.parseObject(resultStr);
 System.out.println(resultObj);
}
}</pre>
</div>
结果如下：
<img src="https://img2024.cnblogs.com/blog/2138872/202404/2138872-20240412104844750-1732983168.png" alt="" width="458" height="670" loading="lazy">
其中step数组如下：
<img src="https://img2024.cnblogs.com/blog/2138872/202404/2138872-20240412104943255-1233081077.png" alt="" width="1036" height="485" loading="lazy">
骑行路径规划
<div class="cnblogs_code">
<pre>//骑行导航
 var riding = new AMap.Riding({
 map: this.map,
 panel: "panel"
 });
 //根据起终点坐标规划骑行路线
 riding.search([114.418656, 30.479686],[114.446108, 30.517827], function(status, result) {
 // result即是对应的骑行路线数据信息，相关数据结构文档请参考https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult
 if (status === 'complete') {
 console.log('绘制骑行路线完成')
 } else {
 console.log('骑行路线数据查询失败' + result)
 }
 });</pre>
</div>
结果如下：
<img src="https://img2023.cnblogs.com/blog/2138872/202311/2138872-20231120153854048-1546544865.png" alt="" width="419" height="369" loading="lazy">
<h3>十五、高德地图POI搜索</h3>
直接上代码
<div class="cnblogs_code">
<pre><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>输入提示后查询</title>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
<table>
 <tr>
 <td>
 <label>请输入关键字：</label>
 </td>
 </tr>
 <tr>
 <td>
 <input id="tipinput"/>
 </td>
 </tr>
</table>
</div>
<script type="text/javascript">
window._AMapSecurityConfig = {
 securityJsCode:'你的安全密钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<script type="text/javascript">
//地图加载
var map = new AMap.Map("container", {
 resizeEnable: true
});
//输入提示
var autoOptions = {
 input: "tipinput"
};

AMap.plugin(['AMap.PlaceSearch','AMap.Autocomplete'], function(){
 var auto = new AMap.Autocomplete(autoOptions);
 var placeSearch = new AMap.PlaceSearch({
 map: map
 });//构造地点查询类
 auto.on("select", select);//注册监听，当选中某条记录时会触发
 function select(e) {
 // placeSearch.setCity(e.poi.adcode);
 // placeSearch.search(e.poi.name);//关键字查询查询
 if(e.poi.location){
 let jd = e.poi.location.lng;
 let wd = e.poi.location.lat;
 let name = e.poi.name;

 //创建起点
 let icon = new AMap.Icon({
 // image: '/homePage/location.svg',
 image: '../assets/location.svg',
 imageSize: new AMap.Size(40, 40)
 });
 let marker = new AMap.Marker({
 position: new AMap.LngLat(jd, wd),
 offset: new AMap.Pixel(-20, -20),
 icon: icon,
 title: name
 });
 let marksArr = [];
 //放入点图形数组
 marksArr.push(marker);
 //选中后在地图上画点
 map.add(marksArr);
 map.setZoomAndCenter(13, );
 }
 }
});
</script>
</body>
</html></pre>
</div>
效果如下：
<img src="https://img2024.cnblogs.com/blog/2138872/202409/2138872-20240910170433537-222955179.gif" alt="" width="1032" height="561" loading="lazy">
注意：2.0版本的话，用AMap.AutoComplete，这里用的是1.4.15，故只能用AMap.Autocomplete。
<img src="https://img2024.cnblogs.com/blog/2138872/202409/2138872-20240910170502710-1694690474.png" alt="" loading="lazy">
<h3>十六、高德地图坐标转换</h3>
文档：https://lbs.amap.com/api/webservice/guide/api/convert
<img src="https://img2024.cnblogs.com/blog/2138872/202409/2138872-20240910173901770-1293463836.png" alt="" width="993" height="570" loading="lazy">
坐标转换在线工具：https://tool.lu/coordinate/
<h3>十七、高德地图逆地理编码</h3>
将经纬度信息转换为省市区信息。API地址：https://lbs.amap.com/api/webservice/guide/api/georegeo
<div class="cnblogs_code">
<pre>https://restapi.amap.com/v3/geocode/regeo?location=116.310003,39.991957&key=<用户的key></pre>
</div>
<img src="https://img2024.cnblogs.com/blog/2138872/202411/2138872-20241112152035276-295300624.png" alt="" width="823" height="182" loading="lazy">
  
来源：https://www.cnblogs.com/zwh0910/p/17829315.html

頁: [1]

琼殿技术论坛's Archiver

高德地图 JS API for Javascript 入门