vue引入百度地图实现轨迹绘制

引入

cnpm i --save vue-baidu-map

main.js

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'U4Bn9fW4tEtgEOtQ29cTpIBm47Ey4LCX'//百度地图密钥
});

代码实现

<baidu-map class="map" :scroll-wheel-zoom="true" :center="map.center" :zoom="map.zoom" @ready="ready"><bm-polyline :path="lineList" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2"></bm-polyline>
</baidu-map>

//引入图片
import qidian from "../../../assets/images/qidian.png";
import zhong from "../../../assets/images/zhong.png";data(){return{map: {center: { lng: 113.763924, lat: 22.938634 },zoom: 18,show: true,dragging: true},lineList:[{ lng: 113.763924, lat: 22.938634 },{ lng: 113.759621, lat: 22.933625 },{ lng: 113.76654, lat: 22.934174 },{ lng: 113.766558, lat: 22.932916 },{ lng: 113.766558, lat: 22.932916 },{ lng: 113.768745, lat: 22.93173 },{ lng: 113.76945, lat: 22.930731 },{ lng: 113.772022, lat:  22.93014 },{ lng: 108.952789, lat:  34.348938 },],
}
}methods: {//轨迹配置ready({ BMap, map }){//起点标注var point = new BMap.Point(113.763924, 22.938634)
var myIcon = new BMap.Icon(qidian, new BMap.Size(48, 48))
var marker = new BMap.Marker(point, { icon: myIcon }) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中//终点标注var point2 = new BMap.Point(108.952789,34.348938)
var myIcon2 = new BMap.Icon(zhong, new BMap.Size(48, 48))
var marker2 = new BMap.Marker(point2, { icon: myIcon2 }) // 创建标注  map.addOverlay(marker2) // 将标注添加到地图中//设置轨迹样式
var array=[];this.lineList.forEach(Element=>{array.push(new BMap.Point(Element.lng, Element.lat))
})var polyline = new BMap.Polyline(array, {strokeColor:"red", strokeWeight:5, strokeOpacity:0.5});
map.addOverlay(polyline);},}

vue引入百度地图实现轨迹绘制相关推荐

html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...
解决Vue引入百度地图JSSDK：BMap is undefined 问题
原文链接:解决Vue引入百度地图JSSDK:BMap is undefined 问题百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入异步加载但vue项目中仅某一两个 ...
vue引入百度地图报错 BMap未定义 error ‘BMap‘ is not defined
vue项目引入百度地图报错 BMap未定义; 在经过了多次的测试后,修改webpack等配置文件后,发现了一个十分便捷的处理方法: 首先是在地图加载的方法中打印了window,发现BMap是挂载在w ...
vue引入百度地图使用地图的JavaScript API GL 实现在地图上标注点位
本文章针对于不会看文档的小白.刚毕业参加工作的前端朋友们. 1.首先要引入百度地图具体流程上个文章有. 2.根据官网的demo引入 (官网的不太详细,可以根据自己需求引入)我这里就展示一部分代码. ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
Vue引入百度地图，如何去掉左下角的版权logo百度等信息？
参考解决Vue用v-html.v-text渲染后台富文本框文本内容样式修改问题,用自定义css样式无法渲染出对应效果的问题_你挚爱的强哥❤给你发来1条消息❤-CSDN博客原理 /*#SGbaiduma ...
百度地图——驾车轨迹绘制（poc）
1.DrivingRoute显示地图搜索的轨迹,Polyline根据经纬度绘制直线轨迹.蓝色线为(DrivingRoute)生成的,红色线为(Polyline)生成的. 2.蓝色标志是替换了途径点的图 ...
Vue引入百度地图警告：A Parser-blocking, cross site (i.e. different eTLD+1) script....
控制台警告在vue中引入地图控制台输出: 警告出现原因页面渲染以后调用了document.write() ,而这种方式chrome53以上版本是不允许的. 警告的用意对于在2G,3G 或者是慢 ...

vue引入百度地图实现轨迹绘制

vue引入百度地图实现轨迹绘制相关推荐

最新文章

热门文章