2021-04-24
2021/4/24 10:26:53
本文主要是介绍2021-04-24,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
调用百度地图插件vue-baidu-map,实现个性化百度地图
JavaScript API支持的个性化地图服务有两个版本,旧版个性化地图服务(Map.setMapStyle接口)已经不再更新。
在使用vue-baidu-map插件的基础上,使用个性化百度地图,解决办法如下:
1.将node_modules/veu-baidu-map/components 整个文件夹复制出来放在components根目录下
2.main.js中更改你复制之后存放的路径
// 引入百度地图 import BaidiMap from '@/components/vue-baidu-map/components'
3.将node_modules/veu-baidu-map/components 整个文件夹复制出来放在components根目录下,找到Map.vue,将v=2.0修改为3.0
$script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=_initBaiduMap`
4.最后在调用百度地图个性化自定义样式的id
handler({ BMap, map }) { var point = new BMap.Point(113.934367, 22.762346); map.centerAndZoom(point, 10); //初始化地图,设置中心点坐标和地图级别 var marker = new BMap.Marker(point); // 创建标注 marker.enableDragging(); //marker可拖拽 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 map.enableScrollWheelZoom(true); map.addOverlay(marker); // 将标注添加到地图中 map.setMapStyleV2({ styleId: "9ca8b761a858f452d892e167e81213cd" }); map.enableScrollWheelZoom(true); //滚轮放大缩小 map.addControl(new BMap.ScaleControl()); // 添加比例尺 map.addControl(new BMap.MapTypeControl()); // 添加带有定位的导航控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true, }); map.addControl(navigationControl); },
至此,已经可以实现百度地图自定义样式
这篇关于2021-04-24的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)