vue中百度地图使用及自定义点聚合样式

百度地图使用及点聚合功能

由于后台固定了百度地图，百度地图和高德地图经纬度转换有次数限制，不能满足项目的正常运行，所以切换了百度地图，下面对使用中遇到的问题进行记录：

安装及使用百度地图：

npm install vue-baidu-map --save
在main.js中引入

    import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: ''// 在百度地图申请的key})

在界面中引用

     <baidu-mapid="map":center="center":zoom="zoom"@ready="handler"/>

在data中定义center和zoom，分别是地图的中心点和’层级深度’

 center: { lng: 0, lat: 0 }zoom: 3

ready事件中可以取到 BMap类和map，从而对地图进行控制

    handler({ BMap, map }) {this.BMap = BMapthis.map = mapmap.setMapStyleV2({styleId: ''//设置自定义样式})map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用map.enableContinuousZoom()// 可拖拽this.center.lng = 116.404this.center.lat = 39.915this.zoom = 15}

修改地图的中心点和层级方法 this.map.centerAndZoom(new BMap.Point(lng, lat), zoom)

点聚合

创建点聚合实例

 this.pointSimplifierList = new BMapLib.MarkerClusterer(this.map, {markers: [],styles: [{url: require('../../assets/fullPage/distributed/12.png'),//点聚合图标背景图size: new BMap.Size(190, 36)//点聚合图标大小}]})

为点聚和填入点数据

drawClusterer(markerArr) {//markerArr是所有点的数组，其中包含了经纬度，点的图标，类型等const markarr = []for (let i = 0; i < markerArr.length; i++) {const point = new BMap.Point(markerArr[i].lng, markerArr[i].lat) // 循环生成新的地图点const icon = new BMap.Icon(markerArr[i].icon, new BMap.Size(48, 48))const marker = new BMap.Marker(point, { icon }) // 按照地图点坐标生成标记marker.info = markerArr[i]const that = thismarker.addEventListener('click', function(e) {//这里可以做点击效果，如点击出现详情弹窗等})markarr.push(marker)}this.pointSimplifierList.addMarkers(markarr)
}

修改聚合点样式，增加聚合点其他触发效果

在index.html中引入两个文件,这里我是把这两个文件放在和index.html同级了

    <script src="/TextIconOverlay.js"></script><script src="/MarkerClusterer.js"></script>

修改这两个文件

MarkerClusterer.js中，找到原本带有的click事件，在下面照着写一个mouseover事件

 this._clusterMarker.addEventListener('mouseover', function(event) {// that._markers 这个是所有的点，在drawClusterer中给他塞了一个info字段，在这里遍历这个数组就能拿到这个点的info// 如触摸展示弹窗，我是手写了一段html放在liHtml中，样式可以写在地图的vue文件里// same_data这个div写在地图的vue里let liHtml = ''const div = document.getElementById('same_data')div.style.left = event.pixel.x + 'px'div.style.top = event.pixel.y + 'px'div.style.display = 'block'div.innerHTML = liHtml})// 和他对应的还会监听一个mouseout事件同理。

TextIconOverlay.js中，修改的点聚合的样式，找到 _updateText 方法，对这段html进行修改，改为UI的样式，样式也是在写在vue中就可以；
这里的this._text默认只有聚合点的数量，如果要其他信息，可以在 MarkerClusterer.js中this._clusterMarker.setText 赋值的地方给修改一下

this._domElement.innerHTML = '<div class="amap-marker-content"><div class="info-name">' + this._text.name + '</div>' + '<div class="info-num">' + this._text.value + '</div><div>'

vue中百度地图使用及自定义点聚合样式相关推荐

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中百度地图的图形绘制
说明由于 MVVM 数据驱动视图的特性,地图中的图形绘制不再需要使用 BMapLib.DrawingManager 等第三方工具库来实现. 示例绘制折线代码 <baidu-map clas ...
vue中谷歌地图标记点、聚合点图标自定义
vue中谷歌地图标记点.聚合点图标自定义标记点自定义聚合点自定义完整代码最近用vue+谷歌地图做国外项目,地图需要有标记点和聚合点. 标记点:1,图标样式自定义 2,点击更换图标聚合点:1, ...
小记Vue2中百度地图的使用
近期项目需求相关地图限定使用百度地图,功能比较简单.为了防止忘记特此发帖帮助记忆一下.效果图如下: 接下来我将分步骤演示一下. (1)引入地图 npm i vue-baidu-map --s 安装完依 ...
百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...

vue中百度地图使用及自定义点聚合样式

百度地图使用及点聚合功能

安装及使用百度地图：

点聚合

创建点聚合实例

为点聚和填入点数据

修改聚合点样式，增加聚合点其他触发效果

vue中百度地图使用及自定义点聚合样式相关推荐

最新文章

热门文章