休闲文化网站,营销网站外包,论述网站建设整个流程,宁波江北区建设局网站目录
一、申请密钥
二、安装element-ui
三、安装高德地图依赖
四、完整代码
五、运行截图
六、官方文档
七、Gitee源码 一、申请密钥
登录高德开放平台#xff0c;点击我的应用#xff0c;先添加新应用#xff0c;然后再添加Key。
如图所示填写对应的信息…目录
一、申请密钥
二、安装element-ui
三、安装高德地图依赖
四、完整代码
五、运行截图
六、官方文档
七、Gitee源码 一、申请密钥
登录高德开放平台点击我的应用先添加新应用然后再添加Key。
如图所示填写对应的信息系统就会自动生成。
二、安装element-ui
没安装的看官方文档Element - The worlds most popular Vue UI framework
三、安装高德地图依赖 npm i amap/amap-jsapi-loader --save 四、完整代码
我也是参考着官方文档写的把刚才申请好的安全密钥和Key替换进去然后自己改一下起始点的经纬度信息和轨迹点信息就行了。
思路就是先初始化地图创建起始点的Marker再通过for循环遍历list集中的轨迹点CircleMarker并同时为每个轨迹点添加点击事件把信息窗体InfoWindow放进去这样就能查看每个轨迹点的详细信息了最后通过创建Polyline实例绘制完整的轨迹路径。
templatedivdiv idcontainer classcontainer/div/div
/templatescript
import AMapLoader from amap/amap-jsapi-loader;
window._AMapSecurityConfig {// 安全密钥securityJsCode: 你的申请的安全密钥,
};
export default {name: HomeView,data() {return {// 地图实例map: null,// 地址逆解析geoCoder: null,// 搜索提示AutoComplete: null,// 搜索节流阀loading: false,//起点经纬度startPosition:{time: 2023-12-19 10:28:10,lon: 121.1342347,lat: 32.0551446},//终点经纬度endPosition:{time: 2023-12-19 10:31:10,lon: 121.1835337,lat: 32.0486566},//轨迹点列表list:[{time: 2023-12-19 10:28:10,lon: 121.1342347,lat: 32.0551446},{time: 2023-12-19 10:28:30,lon: 121.1406307,lat: 32.0553588},{time: 2023-12-19 10:29:10,lon: 121.1475297,lat: 32.0555119},{time: 2023-12-19 10:29:30,lon: 121.1579859,lat: 32.0558791},{time: 2023-12-19 10:29:50,lon: 121.1679751,lat: 32.0563687},{time: 2023-12-19 10:30:10,lon: 121.1820965,lat: 32.0571032},{time: 2023-12-19 10:30:20,lon: 121.1866958,lat: 32.0572256},{time: 2023-12-19 10:30:30,lon: 121.1869832,lat: 32.0557261},{time: 2023-12-19 10:30:40,lon: 121.1869473,lat: 32.0534614},{time: 2023-12-19 10:31:10,lon: 121.1835337,lat: 32.0486566}]};},created() {this.initMap()},methods: {initMap() {AMapLoader.load({// 你申请的Keykey: 你申请的Key,version: 2.0,// 需要用到的插件plugins: [AMap.Geocoder, AMap.AutoComplete],}).then((AMap) {this.map new AMap.Map(container, {viewMode: 3D, //是否为3D地图模式zoom: 12, //初始化地图级别center: [116.324887,40.003069], //初始化地图中心点位置});//地址逆解析插件this.geoCoder new AMap.Geocoder({city: 010, //城市设为北京默认“全国”radius: 1000, //范围默认500});// 搜索提示插件this.AutoComplete new AMap.AutoComplete({ city: 全国 });this.trackPoint();}).catch((err) {console.log(err)// 错误});},createStartPoint(){// 创建一个 Iconvar startIcon new AMap.Icon({// 图标尺寸size: new AMap.Size(25, 34),// 图标的取图地址image: //a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png,// 图标所用图片大小imageSize: new AMap.Size(135, 40),// 图标取图偏移量imageOffset: new AMap.Pixel(-9, -3)});// 将 icon 传入 markervar startMarker new AMap.Marker({position: new AMap.LngLat(this.startPosition.lon,this.startPosition.lat),icon: startIcon,offset: new AMap.Pixel(-13, -30)});// 将 markers 添加到地图this.map.add([startMarker]);},createEndPoint(){// 创建一个 iconvar endIcon new AMap.Icon({size: new AMap.Size(25, 34),image: //a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png,imageSize: new AMap.Size(135, 40),imageOffset: new AMap.Pixel(-95, -3)});// 将 icon 传入 markervar endMarker new AMap.Marker({position: new AMap.LngLat(this.endPosition.lon,this.endPosition.lat),icon: endIcon,offset: new AMap.Pixel(-13, -30)});this.map.add([endMarker]);},trackPoint(){this.createStartPoint();this.createEndPoint();let path []for(let i 0 ; i this.list.length ; i){path.push(new AMap.LngLat(this.list[i].lon, this.list[i].lat))this.createCircleMarker(this.list[i])}this.createLine(path)//自动缩放地图到合适大小this.map.setFitView();},createCircleMarker(data){let center new AMap.LngLat(data.lon, data.lat);let radius 7; //单位:pxlet circleMarker new AMap.CircleMarker({center: center, //圆心radius: radius, //半径strokeColor: blue, //轮廓线颜色strokeWeight: 2, //轮廓线宽度strokeOpacity: 1, //轮廓线透明度fillColor: rgb(255,255,255), //圆点填充颜色fillOpacity: 1, //圆点填充透明度zIndex: 10, //圆点覆盖物的叠加顺序cursor: pointer, //鼠标悬停时的鼠标样式});let _that this;//创建点标记的点击事件circleMarker.on(click, function (e) {//信息窗体的内容let content [divb轨迹点信息/b,经度data.lon,纬度data.lat,时间data.time,/div,];//创建 infoWindow 实例let infoWindow new AMap.InfoWindow({content: content.join(br), //传入字符串拼接的 DOM 元素anchor: top-left,autoMove:false});//打开信息窗体infoWindow.open(_that.map, e.lnglat);});//圆形 circleMarker 对象添加到 Mapthis.map.add(circleMarker);},createLine(path){//创建 Polyline 实例let polyline new AMap.Polyline({path: path,showDir: true,strokeColor: #039bc5, //线颜色strokeOpacity: 1, //线透明度strokeWeight: 6, //线宽zIndex: 5, //圆点覆盖物的叠加顺序strokeStyle: solid, //线样式});this.map.add(polyline);}},mounted() {},
};
/scriptstyle
.container {margin-top: 10px;width: 1280px;height: 720px;
}
/style
五、运行截图
六、官方文档
更多教程参考高德官方文档折线-线-进阶教程-地图 JS API 2.0 | 高德地图API
七、Gitee源码
码云地址vue2接入高德地图实现折线绘制起始点标记轨迹打点的完整功能
