vue中百度地图的图形绘制

说明

由于 MVVM 数据驱动视图的特性，地图中的图形绘制不再需要使用 BMapLib.DrawingManager 等第三方工具库来实现。

示例

绘制折线

代码

<baidu-map class="map":center="{lng: 116.404, lat: 39.915}":zoom="14"@mousemove="syncPolyline"@click="paintPolyline"@rightclick="newPolyline"><bm-control><button @click="toggle('polyline')">{{ polyline.editing ? '停止绘制' : '开始绘制' }}</button></bm-control><bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>
</baidu-map><script>
export default {data () {return {polyline: {editing: false,paths: []}}},methods: {toggle (name) {this[name].editing = !this[name].editing},syncPolyline (e) {if (!this.polyline.editing) {return}const {paths} = this.polylineif (!paths.length) {return}const path = paths[paths.length - 1]if (!path.length) {return}if (path.length === 1) {path.push(e.point)}this.$set(path, path.length - 1, e.point)},newPolyline (e) {if (!this.polyline.editing) {return}const {paths} = this.polylineif(!paths.length) {paths.push([])}const path = paths[paths.length - 1]path.pop()if (path.length) {paths.push([])}},paintPolyline (e) {if (!this.polyline.editing) {return}const {paths} = this.polyline!paths.length && paths.push([])paths[paths.length - 1].push(e.point)}}
}
</script>

预览

详细使用点击进入

vue中百度地图的图形绘制相关推荐

vue中百度地图使用及自定义点聚合样式
百度地图使用及点聚合功能由于后台固定了百度地图,百度地图和高德地图经纬度转换有次数限制,不能满足项目的正常运行,所以切换了百度地图,下面对使用中遇到的问题进行记录: 安装及使用百度地图: npm i ...
vue引入百度地图实现轨迹绘制
引入 cnpm i --save vue-baidu-map main.js import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'U ...
Vue中百度地图（vue-baidu-map）的使用
1.开始 vue-map-baidu:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 百度地图开发者平台申请密钥详见: h ...
vue中百度地图标注
npm install vue-baidu-map --save // main.js中引用,注册全局组件 import BaiduMap from 'vue-baidu-map'Vue.use(Ba ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...

vue中百度地图的图形绘制

说明

示例

绘制折线

vue中百度地图的图形绘制相关推荐

最新文章

热门文章