vue 使用百度地图以及地图样式、绘制点、点聚合和多边形区域、自定义点样式、聚合样式等

index.html 引入百度地图api：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的的密钥">

引入样式文件：我在官网上下载的样式文件，可以自定义

这个样式文件放在public文件夹下面的json文件夹里

  <script type="text/javascript" src="json/custom_map_config.json"></script>

应用点聚合工具开源库的文件：

  <script src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

在vue单文件中放置容器：

<template><div><div class="allmap" ref="allmap"></div></div>
</template>

给容器设置样式：

<style lang="scss" scoped>
.allmap {height: 600px;width: 800px;margin: auto;background-color: #fff;
}
</style>

js部分：

 mounted() {this.useMap()},methods: {useMap() {let that = this;let map = new BMap.Map(this.$refs.allmap) // 创建Map实例map.centerAndZoom(new window.BMap.Point(106.601039, 29.797674), 11) // 初始化地图,设置中心点坐标和地图级别map.addControl(new window.BMap.MapTypeControl({ // 添加地图类型控件mapTypes: [window.BMAP_NORMAL_MAP,window.BMAP_HYBRID_MAP]}))map.setCurrentCity('北碚') // 设置地图显示的城市 map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放map.setMapStyle({ styleJson: mapStyle }); // 地图样式// 引入自定义图标 图片并设置样式let imgPath = require('@/assets/img/mapIcon3.png')let myIcon = new window.BMap.Icon(imgPath, new window.BMap.Size(48, 48), {imageOffset: new window.BMap.Size(0, 0, 0)   // 设置图片偏移   });let markersArr = [{ lng: 106.310011, lat: 29.870052, name: 'atm', },{ lng: 106.382449, lat: 29.821434, name: 'atm', },{ lng: 106.505481, lat: 29.786334, name: 'atm', },{ lng: 106.51698, lat: 29.881076, name: 'atm', },{ lng: 106.438216, lat: 29.883581, name: 'atm', },{ lng: 106.366352, lat: 29.845496, name: 'atm', },{ lng: 106.300545, lat: 29.841935, name: 'atm', },{ lng: 106.430167, lat: 29.832964, name: 'atm', },{ lng: 106.403146, lat: 29.781318, name: 'atm', },{ lng: 106.429018, lat: 29.736671, name: 'atm', },];let markers = [];//标记聚合函数 输入经纬度和名称markersArr.forEach(item => {map.clearOverlays();//清空原来的标注let pt = null;//创建点pt = new window.BMap.Point(item.lng, item.lat);//创建标记let marker = new window.BMap.Marker(pt, { icon: myIcon });//定义文本内容let content = item.name + "<br/><br/>经度：" + item.lng + "<br/>纬度：" + item.lat;//添加显示文本let infoWindow = new window.BMap.InfoWindow("<p style='font-size:16px;'>" + content + "</p>");//添加鼠标放置事件marker.addEventListener("mouseover", function () {// console.log(1111111111);// map.openInfoWindow(infoWindow);});//添加点击事件marker.addEventListener("click", function () {this.openInfoWindow(infoWindow);});//将标记放入标记数组markers.push(marker);})//地图缩放重新计算聚合点map.addEventListener("zoomend", function () {markerClustersPoint(markers);});markerClustersPoint(markers);//聚合添加方法function markerClustersPoint(markers) {if (that.markerClusterer) {that.markerClusterer.clearMarkers();//清除聚合map.clearOverlays(); // 清除标注}//调用API聚合函数将标记数组显示在地图上// 聚合样式let myStyles = [{url: imgPath,size: new window.BMap.Size(48, 48), // 聚合点大小opt_anchor: [0, 0],textColor: 'rgba(0,0,0,0)',textSize: 16,}];// 实现聚合that.markerClusterer = new window.BMapLib.MarkerClusterer(map, { markers: markers, minClusterSize: 2, });//最小的聚合数量，小于该数量的不能成为一个聚合，默认为2});// 将样式通过setStyles设置即可// 也可在this.markerClusterer构造函数的第二个参数中加入styles属性，直接将样式写入，两种方式都行that.markerClusterer.setStyles(myStyles);// 拿到所有的聚合点//this.markerClusterer中的 _clusters是一个数组，包含了可视范围的所有聚合点   that.cluster = that.markerClusterer._clusters;for (let i = 0; i < that.cluster.length; i++) {//cluster[i]._markers中包含此聚合点的所有marker集合//marker长度小于等于2时不进行聚合效果显示if (that.cluster[i]._markers.length <= 2) {continue}//自定义函数内容，可进行聚合点数据获取操作//拿到聚合点中的marker数量，用于数字显示var cluserMakerSum = that.cluster[i]._markers.length;//添加markeraddMarkerCluser(that.cluster[i]._center)}// 标记自定义markerfunction addMarkerCluser(point) {let markerdef = new window.BMap.Marker(point,{// icon: 设置marker样式icon: new window.BMap.Symbol(window.BMap_Symbol_SHAPE_CIRCLE, {scale: 0,strokeWeight: 0,strokeColor: "rgba(0,0,0,0)",fillColor: "rgba(0,0,0,0)",fillOpacity: 0})});//设置marker的labellet labelTitleCluser = cluserMakerSum;let label = new window.BMap.Label(labelTitleCluser, {offset: new window.BMap.Size(0, -32)   // 偏移位置});//设置label样式 聚合的数字显示let styleData = {color: "rgba(255,255,255,1)",fontSize: "16px",backgroundColor: "#F0C92B",border: "1px ",borderRadius: '16px',width: '24px',height: '24px',lineHeight: '24px',textAlign: 'center',}label.setStyle(styleData);markerdef.setLabel(label);map.addOverlay(markerdef);return markerdef;}// 添加多边形区域  beibei 和 jiangbei 是先引入的json文件 从dataV下载的let beibeiArray = beibei.features[0].geometry.coordinates[0][0];let jiangbeiArray = jiangbei.features[0].geometry.coordinates[0][0];// 北碚let mapArr = [];beibeiArray.forEach(element => {let poin = new window.BMap.Point(element[0], element[1])mapArr.push(poin)});var polygon = new window.BMap.Polygon(mapArr, { strokeColor: "#39A0FF", strokeWeight: 2, strokeOpacity: 1, fillColor: "rgba(17, 72, 114,0.5)", });map.addOverlay(polygon);// 江北let beibeimap = [];jiangbeiArray.forEach(ele => {let pon = new window.BMap.Point(ele[0], ele[1])beibeimap.push(pon)})let polygon1 = new window.BMap.Polygon(beibeimap, { strokeColor: "#39A0FF", strokeWeight: 2, strokeOpacity: 1, fillColor: "rgba(17, 72, 114,0.5)", });map.addOverlay(polygon1);}//添加地图平移缩放控件map.addControl(new window.BMap.NavigationControl());//控制地图的最大和最小缩放级别map.setMinZoom(11);map.setMaxZoom(17.5);}}

写的时候直接写BMap会报错，在package.json 文件中加入下面代码即可：

"globals": {"BMap": true}

去掉地图上的默认标记和链接，直接css写：

<style >
/* 去掉地图默认标记 */
.BMap_cpyCtrl {display: none;
}
.anchorBL {display: none;
}
.BMap_noprint {display: none;
}
.BMap_Marker {display: inline-block;
}
</style>

效果：

阿里云地址：

DataV.GeoAtlas地理小工具系列

直接选中想要的区域，就可以下载对应的数据啦

这里的json数据还可以用来画echarts地图，详情可见：

https://blog.csdn.net/weixin_54106595/article/details/123796644

vue 使用百度地图以及地图样式、绘制点、点聚合和多边形区域、自定义点样式、聚合样式等相关推荐

vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
百度地图API根据经纬度绘制轨迹图（Vue附源码）
目录导入百度地图绘制轨迹左侧点击事件添加窗口页面完整代码有用可以点个关注,收藏!! vue版本百度地图官方组件:https://dafrok.github.io/vue-baidu-map/ ...
vue中百度地图的图形绘制
说明由于 MVVM 数据驱动视图的特性,地图中的图形绘制不再需要使用 BMapLib.DrawingManager 等第三方工具库来实现. 示例绘制折线代码 <baidu-map clas ...
vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图
为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScr ...
Vue 使用百度地图GL
项目开发笔记一.引入 public index文件引入百度地图Gl <script type="text/javascript" src="https://api ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...

vue 使用百度地图以及地图样式、绘制点、点聚合和多边形区域、自定义点样式、聚合样式等

vue 使用百度地图以及地图样式、绘制点、点聚合和多边形区域、自定义点样式、聚合样式等相关推荐

最新文章

热门文章

vue 使用百度地图以及地图样式、绘制 点、点聚合和多边形区域、自定义点样式、聚合样式等

vue 使用百度地图以及地图样式、绘制 点、点聚合和多边形区域、自定义点样式、聚合样式等相关推荐

最新文章

热门文章

vue 使用百度地图以及地图样式、绘制点、点聚合和多边形区域、自定义点样式、聚合样式等

vue 使用百度地图以及地图样式、绘制点、点聚合和多边形区域、自定义点样式、聚合样式等相关推荐