百度地图自定义marker(图标),layer(覆盖层)

概要本文只要涉及的内容有,web中动态引入百度地图,基于百度地图的本地搜索(公交,地铁,停车场),自定义marker,layer,接入微信内置地图(微信中使用第三方导航)。效果预览地图懒加载本示例应用于小程序内嵌的webview,web开发使用react。由于示例作为项目中的一个不必要模块,不是每次进入都会加载,因此选择在项目确定使用百度地图时,在进行加载。即动态加载百度地图的地图服务资...
摘要由CSDN通过智能技术生成

概要

本文只要涉及的内容有,web中动态引入百度地图,基于百度地图的本地搜索(公交,地铁,停车场),自定义marker,layer,接入微信内置地图(微信中使用第三方导航)。

效果预览

在这里插入图片描述

地图懒加载

本示例应用于小程序内嵌的webview,web开发使用react。由于示例作为项目中的一个不必要模块,不是每次进入都会加载,因此选择在项目确定使用百度地图时,在进行加载。即动态加载百度地图的地图服务资源(代码直接从网上copy了一个):

MP(ak) {
        return new Promise(resolve=> {
            const script = document.createElement("script");
            script.type = "text/javascript";
            script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`;
            document.head.appendChild(script);
            window.init = () => {
                resolve(window.BMap);
            };
        });
    }
openBMap() {
            this.MP("你的ak").then(BMap => {
                this.bmap = new BMap.Map("allmap");            // 创建Map实例
                const mPoint = new BMap.Point(103.96120956167579, 30.67880629052847);
                this.bmap.enableScrollWheelZoom();
                this.bmap.centerAndZoom(mPoint, 15);
                const options = {
                    onSearchComplete: (results) &
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值