百度地图自定义marker（图标），layer（覆盖层）

最新推荐文章于 2025-02-26 08:32:28 发布

j_bleach

最新推荐文章于 2025-02-26 08:32:28 发布

阅读量1.1w

点赞数

分类专栏： js map 文章标签：百度地图 js sdk

本文链接：https://blog.youkuaiyun.com/j_bleach/article/details/93194464

版权

本文介绍了如何在web应用中动态引入并使用百度地图，包括地图懒加载、自定义marker和layer的实现。此外，还讨论了如何在微信小程序中调用微信内置地图，并处理坐标转换问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概要

本文只要涉及的内容有，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 = {
                    onSearch

最低0.47元/天解锁文章