文章目录

前言
一、准备工作
- 1.申请应用
- 2.引入
- 3.创建地图
二、使用高德地图
- 1.覆盖物
- - (1) 点标记
  - (2) 海量点标记
  - (3) 轨迹回放
- 2.矢量图形
- - (1) 多边形
- 3.图层
- - (1) 热力图
  - (2) Canvas图层
- 4.坐标转换

前言

项目使用了高德地图进行开发，记录一下demo和使用中遇到的一些问题。想使用百度地图可以查看另一篇文章Vue+百度地图api

一、准备工作

1.申请应用

首先去官网申请密钥高德控制台

2.引入

在public index.html引入，注意密钥的设置一定要在地图之前，本文基于2.0版本。

<script>window._AMapSecurityConfig = {securityJsCode: '您申请的安全密钥',}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>

config.js配置文件中

externals: {"AMap": "AMap"
},

3.创建地图

创建一个div当作容器，然后写一个初始化的方法即可

<template><div class="map" id="map-center" ref="map-center"></div>
</template><script>
import AMap from "AMap";
export default {name: "map-center",data() {return {map: null,};},mounted() {this.initMap();},methods: {initMap() {this.map = new AMap.Map("map-center", {// 3D或2DviewMode: "2D",resizeEnable: true, //自适应大小zoom: 12, //设置地图显示的缩放级别center: [104.066301, 30.572961], //设置地图中心点坐标});},},
};
</script><style scoped>
.map {height: 800px;width: 100%;
}
</style>

以下所有案例都是以上述代码为基础

二、使用高德地图

1.覆盖物

(1) 点标记

最简单的使用

<script>
export default {data() {return {map: null,marker: null,}},methods: {// 添加点标记addMarker() {this.marker = new AMap.Marker({position: [104.066301, 30.572961], // 坐标});this.map.add(this.marker);},//删除点标记delMarker() {this.map.remove(this.marker);},},
}
</script>

也可以自定义点的图标样式

addMarker() {// 创建 AMap.Icon 实例：let icon = new AMap.Icon({size: new AMap.Size(50, 50), // 图标尺寸image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // Icon的图像imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等imageSize: new AMap.Size(0, 0), // 根据所设置的大小拉伸或压缩图片});// 将 Icon 实例添加到 marker 上:this.marker = new AMap.Marker({position: new AMap.LngLat(104.066301, 30.572961),offset: new AMap.Pixel(-10, -10),icon: icon, // 添加 Icon 实例title: "这是一个点",zoom: 13,});this.map.add(this.marker);
},

(2) 海量点标记

如果要展示的点位过多，地图上渲染会很慢，这时候使用点聚合可以很好解决问题。
首先要引入MarkerCluster，两种方式
直接在引入地图的js链接后面跟上参数，就可以直接使用。注：所有的插件都可以用这两种方式引入

<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MarkerCluster"></script>

或者

this.map.plugin(["AMap.MarkerCluster"], () => {// 业务代码
})

<script>
export default {data() {return {map: null,markerCluster : null,}},methods: {addMarkerCluster() {/*** 【经纬度】lnglat 为必填字段；* 【权重】weight 为可选字段，聚合时以权重高的点为中心进行聚合* 也可以自定义一些数据，如id*/let points = [{weight: 8,lnglat: [104.062374, 30.578265],id: 1,},{weight: 1,lnglat: [104.064091, 30.577157],id: 2,},{weight: 1,lnglat: [104.063919, 30.575679],id: 3,},{weight: 1,lnglat: [104.062889, 30.574866],id: 4,},{weight: 1,lnglat: [104.063748, 30.576418],id: 5,},{weight: 1,lnglat: [104.065292, 30.576639],id: 6,},{weight: 1,lnglat: [104.063404, 30.575901],id: 7,},{weight: 1,lnglat: [104.062546, 30.576085],id: 8,},{weight: 1,lnglat: [104.06349, 30.577489],id: 9,},];this.map.plugin(["AMap.MarkerCluster"], () => {this.markerCluster = new AMap.MarkerCluster(this.map, points, {// 聚合网格像素大小gridSize: 50,});// 绑定点击事件this.markerCluster.on("click", (res) => {// 点击聚合点的时候也会触发事件，所以为了确保点击的是某一个点，做了判断if (res.cluster.m.length === 1) {console.log(res.cluster.m[0].id);}});});},// 删除点聚合delMarkerCluster() {// 两个方法可以删除，选择一种即可// 相当于把点聚合的坐标集给清空this.markerCluster.setData(null);// 相当于把地图上展示的点聚合清除this.markerCluster.setMap(null);this.markerCluster= null;},},
}
</script>

(3) 轨迹回放

<script>
export default {data() {return {map: null,// 轨迹数据lineArr: [[104.054573, 30.582289],[104.057577, 30.582326],[104.06013, 30.582381],[104.0641, 30.582455],[104.06425, 30.580386],[104.064207, 30.575602],[104.059959, 30.575343],[104.054744, 30.575251],]}},methods: {// 添加轨迹addTrack() {// 用折线绘制轨迹this.polyline = new AMap.Polyline({map: this.map,path: this.lineArr,// 添加dirImg可以自定义路线的箭头，支持Image和CanvasshowDir: true,dirImg:'https://a.amap.com/jsapi_demos/static/images/mass0.png',strokeColor: "#28F", //线颜色strokeOpacity: 1,     //线透明度strokeWeight: 6, //线宽strokeStyle: "solid"  //线样式});// 创建了一个车辆的点用于运动this.startMarker = new AMap.Marker({map: this.map,size: new AMap.Size(50, 52),// 第一个点为起点position: this.lineArr[0],icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",offset: new AMap.Pixel(-35, -20),});},// 删除轨迹delTrack() {// 起点删除if (this.startMarker) {this.startMarker.remove();this.startMarker = null;}// 折线删除if (this.polyline) {this.polyline.setMap(null);this.polyline = null;}// 走过的折线删除if (this.passedPolyline) {this.passedPolyline.setMap(null);this.passedPolyline = null;}},// 开始运动startAnimation() {// 加载插件MoveAnimationAMap.plugin("AMap.MoveAnimation", () => {// 运动过的轨迹样式this.passedPolyline = new AMap.Polyline({map: this.map,strokeColor: "#AF5", //线颜色strokeWeight: 6, //线宽});// 绑定运动事件this.startMarker.on("moving", (e) => {this.passedPolyline.setPath(e.passedPath);this.map.setCenter(e.target.getPosition(), true);});// 开始运动this.startMarker.moveAlong(this.lineArr, {// 每段动画持续时长, 单位：msduration: 500,// 覆盖物是否沿路径旋转autoRotation: true,});});},// 暂停运动pauseAnimation() {this.startMarker.pauseMove();},// 继续运动resumeAnimation() {this.startMarker.resumeMove();},// 停止运动stopAnimation() {this.startMarker.stopMove();},},
}
</script>

2.矢量图形

(1) 多边形

可以使用这个来当作网格

<script>
export default {data() {return {map: null,polygon: null}},methods: {// 添加多边形addPolygon() {// 使用一些坐标假数据，一般是从后端获取，这里添加了两个多边形let data = [[[[104.060169, 30.571391],[104.065534, 30.571483],[104.06592, 30.56607],[104.060384, 30.566162],],],[[[104.065987, 30.569562],[104.067682, 30.569571],[104.067489, 30.569007],[104.067714, 30.568305],[104.066126, 30.568305],],],];// 创建实例，用一个全局变量接收，方便调用其他方法this.polygon = new AMap.Polygon({// 坐标集path: data,// 多边形填充颜色，使用16进制颜色代码赋值fillColor: "#ccebc5",// 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明strokeOpacity: 1,// 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明fillOpacity: 0.5,// 线条颜色，使用16进制颜色代码赋值strokeColor: "#2b8cbe",// 轮廓线宽度strokeWeight: 1,// 轮廓线样式，实线:solid，虚线:dashedstrokeStyle: "solid",// 虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效strokeDasharray: [5, 5],// 鼠标悬停的样式cursor: "pointer",});// 绑定鼠标移上事件this.polygon.on("mouseover", () => {this.polygon.setOptions({fillOpacity: 0.7,fillColor: "#7bccc4",});});// 绑定鼠标移出事件this.polygon.on("mouseout", () => {this.polygon.setOptions({fillOpacity: 0.5,fillColor: "#ccebc5",});});// 把多边形放入地图上this.map.add(this.polygon);},// 隐藏hidePolygon() {this.polygon.hide();},// 显示showPolygon() {this.polygon.show();},// 销毁destroyPolygon() {this.polygon.destroy();}},
}
</script>

效果

3.图层

(1) 热力图

使用插件AMap.HeatMap

<script>
export default {data() {return {map: null,heatmap: null,}},methods: {// 添加热力图addHeatmap() {this.map.plugin(["AMap.HeatMap"], () => {// 初始化heatmap对象this.heatmap = new AMap.HeatMap(this.map, {// 热力图中单个点的半径radius: 25,// 热力图的透明度,取值范围[0,1]，0表示完全透明，1表示不透明opacity: [0, 0.8],// 热力图的渐变区间, 其中 key 表示插值的位置, 0-1,value 为颜色值gradient: {0.5: "blue",0.65: "rgb(117,211,248)",0.7: "rgb(0, 255, 0)",0.9: "#ffea00",1.0: "red",},});});// lng经度，lat纬度，count权重let heatmapData = [{lng: 104.066301,lat: 30.572961,count: 12,},{lng: 104.066301,lat: 30.573113,count: 10,},{lng: 104.065437,lat: 30.574296,count: 9,},{lng: 104.067776,lat: 30.572153,count: 5,},{lng: 104.067261,lat: 30.57509,count: 11,},{lng: 104.061704,lat: 30.57424,count: 8,},{lng: 104.066017,lat: 30.571321,count: 15,},];// 设置数据this.heatmap.setDataSet({// 坐标数据集data: heatmapData,// 权重最大值，不填则取数据集count最大值max: 20,});},// 删除delHeatmap() {this.heatmap.setMap(null);},// 显示showHeatmap() {this.heatmap.show();},// 隐藏hideHeatmap() {this.heatmap.hide();},},
}
</script>

(2) Canvas图层

<script>
export default {data() {return {context: null,canvasLayer: null,radious: 0,}},methods: {addCanvas() {/** 添加Canvas图层*/let canvas = document.createElement("canvas");canvas.width = canvas.height = 200;this.canvasLayer = new AMap.CanvasLayer({canvas: canvas,bounds: new AMap.Bounds([104.07368741587149, 30.579319946772618],[104.05891555268354, 30.566601636273084]),zooms: [3, 18],});this.canvasLayer.setMap(this.map);let context = canvas.getContext("2d");context.fillStyle = "rgb(0,100,255)";context.strokeStyle = "white";context.globalAlpha = 1;context.lineWidth = 2;this.context = context;this.draw();},draw() {let context = this.context;context.clearRect(0, 0, 200, 200);context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;this.radious = (this.radious + 1) % 100;context.beginPath();context.arc(100, 100, this.radious, 0, 2 * Math.PI);context.fill();context.stroke();// 使用3D地图时需要调用// this.CanvasLayer.reFresh();AMap.Util.requestAnimFrame(this.draw);},},
}
</script>

虽然实现了，但是速度异常的慢，这里留个坑，以后解决

4.坐标转换

有三种类型，gps，baidu，mapbar

var gps = [116.3, 39.9];
AMap.convertFrom(gps, type, (status, result) => {if (result.info === 'ok') {var lnglats = result.locations;}
});

Vue+高德地图api相关推荐

利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
Vue+高德地图API的使用
浏览器搜索高德开放平台或者高德地图API 链接地址:https://lbs.amap.com/ 二.创建Vue项目 Vue2跟Vue3的差别不大,用哪个都可以使用npm 安装高德地图按 N ...
Vue+高德地图API的使用(插件的使用)
接上次地图显示官方文档:根据自己需求引入想要的插件在AMapLoader.load中的plugins引入你所需要的插件 //这里是我引入的插件 plugins: ["AMap.ToolB ...
vue 高德地图api爬坑之路（三）Autocomplete 和 PlaceSearch
添加页面控件 <div class="search-div" ><el-input id="tipInput" v-model="i ...
Vue+高德地图API的使用(电子围栏)
页面绘制 <template><el-table :data="fencingData" border st ...
vue 高德地图API根据地址获取经纬度/根据经纬度获取地址
1.引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&am ...
高德地图API入门-marker标注以及区域色块着色
1.vue高德地图api安装 npm i @amap/amap-jsapi-loader --save 2.地图初始化,加载卫星titlemap initMap(){// window._AMapSe ...

Vue+高德地图api