vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图

为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScript版的了,话不多说,请看代码

1-第一步肯定是要引入啊,注意,是在vue的public出口文件的index.html中引入,因为我在这用到了聚合点,所以引入的有点多

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=百度地图申请的3.0版&s=1"></script><script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script><script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

2-全局引入完成后,在需要使用到的页面先写个div,宽高一定要给,这个就是我绘制的地图的画布了,不给宽高显示不出来

  <div id="container" style="height: 100%; width: 100%"></div>

3-地图代码如下

setmap传入俩个参数,一个mapmarker就是后端传入参数,数据是[{lat:'',lon:''}],这种格式的,也就是经纬度

 setMap(mapmarker, switchMap) {// 百度地图API功能var pt = null
//聚合点var markers = []var arr = []arr = mapmarker
//创建百度地图画布var map = new BMap.Map('container')// 创建地图实例,必须有下面的这俩句,地图画布才算是绘制了,不然会报错mp找不到var point = new BMap.Point(arr[0].lon, arr[0].lat)// // 创建点坐标map.centerAndZoom(point, 10)// 个性化,通过switchMap 变量来控制是个性化还是卫星if (switchMap == 1) {// 设置个性化地图map.setMapStyleV2({styleId: 'js样式id'})} else {map.setMapType(BMAP_HYBRID_MAP) // 设置地图类型为卫星模式}map.enableScrollWheelZoom(true)//开启滚轮缩放arr.forEach((item) => {pt = new BMap.Point(item.lon, item.lat)//添加聚合点markers.push(new BMap.Marker(pt))})//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。,必须要写这个不然数据显示不出来var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers})},

4-地图画布是完成了,什么时候去调用setmap(),我在是拿到数据后去调用的这个函数,不然如果页面刷新去调用那么地图肯定是显示不了的,因为提前就绘制了,但是没有数据

5-我在地图上定义了一个自定义按钮el-button,通过这个按钮进行切换地图是卫星还是个性化

<el-buttonv-if="gexhua"size="mini"class="tag-map"@click="tagwxMap()">{{ switchMap ? '卫星地图' : '个性化地图' }}</el-button>

6-el-button控制切换

    // 卫星地图切换tagwxMap() {this.switchMap = !this.switchMapthis.setMap(this.device_list, this.switchMap)}

7-最后显示效果如下,点是不会跳动的哈

好了文章结束了,希望对你有所帮助~

vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图相关推荐

图吧地图(V5.0公测版) 高清地图今日公测
图吧地图(V5.0公测版) 高清地图今日公测软件简介:图吧官方网站 [http://www.mapbar.com] 图吧-首批甲级电子地图资质+专注地图导航服务的老牌+HTC/LG等大厂认证预装.惊 ...
谷歌地图最新hosts_如何查看2020最新版谷歌地球高精度卫星地图（附下载方法）...
2020年还剩最后两个月时间,谷歌地球上的卫星影像地图也陆续更新了,效果怎么样,让我们一起来看看吧! 目前国内谷歌地图上能找到的最新的是8月份的天安门天安门 8月28日卫星拍摄天安门 8月28日卫 ...
2008年卫星地图_黄河入海口1984年-2016年，34年卫星地图变化
2016年12月黄河入海口1984年-2016年,34年卫星地图变化 2015年12月黄河入海口1984年-2016年,34年卫星地图变化 2014年12月黄河入海口1984年-2016年,34年卫星 ...
android 卫星地图,推荐一款亲测好用，可显示卫星地图，高斯平面直角坐标和计算图幅编号等功能的安卓定位导航软件～...
推荐一款亲测好用,可显示卫星地图,高斯平面直角坐标和计算图幅编号等功能的安卓定位导航软件-步行者坐标导航. 一.软件下载小米应用商店搜:步行者坐标导航或 http://appcdn.wapx.cn/ ...
离线百度地图，QT添加按钮点击切换卫星地图和街道地图
一 .首先,需要在自己的map.html文件内添加: var bdmapcfg;// 切换地图类型function satemap(){//百度地图api配置bdmapcfg = {'home':'. ...
百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...
android 调用搜狗地图api,搜狗地图API2.0版本正式上线：推一键搬家功能
搜狗地图API2.0版本正式上线 7月20日,搜狗地图API2.0版本正式上线( http://map.sogou.com/api /),在此前API1.0的基础上,在易用性和灵活性方面全面优化,并将 ...
江西省南昌市谷歌高清卫星地图下载(百度网盘离线包下载)
一.概述南昌,简称 "洪"或"昌",古称豫章.洪都 ,江西省省会,是新中国航空工业的发源地.中国重要的综合交通枢纽和光电产业基地,世界级的光伏产业基地 . ...
上海高清卫星地图百度卫星地图（含标签、道路信息、地名等数据叠加显示）
来源: http://www.arceyes.com/down/gismapdown/ 百度网盘下载:http://www.arceyes.com/down/gismapdown/html/7241. ...

vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图

vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图相关推荐

最新文章

热门文章