Web端嵌入百度地图实现流程

Coly 发布于2019-08-22 15:13 / 1741人阅读

摘要：百度地图这么大的一个平台，应该会给开发者提供。上网搜索一番，在百度地图开发实例番外篇实用方法持续更新中找到了解决方法，原来是需要针对进行多带带配置为百度地图设置规则配置完成之后不报错了，但是在浏览器中查看控制台输出，会发现依然报错。

实现流程

按顺序讲一下自己的实现过程，中间踩了好几个坑，感谢 Google，感谢 SegmentFault，让我成功出坑。

百度地图这么大的一个平台，应该会给开发者提供 API。去哪里找呢？不知道，那就先打开百度地图页面：https://map.baidu.com/，看到页面下方有百度地图开放平台，应该就是它了，点进去看看。

看到开放平台最上方导航栏有“开发文档”，文档里面有“Web 开发中的 JavaScript API”，嗯，点击进去看看都有啥。

进入 JavaScript API 页面之后，查看各个示例的预览图，确定“POI 详情展示”就是所需的功能。

进入该功能的 DEMO 页面，左侧有示例代码，更新代码后点击上方的“运行”按钮，在右侧就会显示代码的执行结果。

要使用开放平台的各项功能功能，需要先申请调用百度地图 API 的 key：进入开放平台的控制台，选择“创建应用”，应用类型选择“浏览器端”，启用服务默认全选，应用名称和 Referer 白名单可按需设置，设置完成后点击提交。

示例代码中的坐标需要改成目标地点的经纬度，通过百度地图的“拾取坐标系统”，用关键字进行搜索，得到搜索结果之后，点击地图中标记的点A，在页面右上方会显示当前坐标点 xxx.xxxxxx, xx.xxxxxx，将坐标复制下来之后，粘贴到示例代码中，按照示例代码中数字的格式，精确到小数点后三位即可 xxx.xxx, xx.xxx。

将示例代码复制到项目中之后，ESLint 会报错（用的 vue-cli，通过 vue init webpack project 指令安装）。上网搜索一番，在百度地图开发实例番外篇--实用方法（持续更新）中找到了解决方法，原来是需要针对 ESLint 进行多带带配置：

// .eslintrc OR .eslintrc.js
module.exports = {
    ...
    "globals": {
        //为百度地图设置规则
        "BMap": true,
        "BMAP_NORMAL_MAP": true,
        "BMAP_HYBRID_MAP":true,
        "BMAP_ANCHOR_TOP_LEFT":true,
        "BMAP_ANCHOR_TOP_RIGHT":true,
        ...
    }
}

配置完成之后 ESLint 不报错了，但是在浏览器中查看控制台输出，会发现依然报错：Cannot read property "gc" of undefined。搜索一番后找到了解决方法，原来是要把示例代码放到 Vue 的 mounted 这个生命周期钩子函数中才行。如果还不行，可以在示例代码外面加上一段代码：

mounted () {
    this.$nextTick(() => {
        // 示例代码
    })
}

好了，到这里就大功告成了，哈哈。

云服务器 GPU云服务器网页嵌入百度地图百度地图搜索框实现 web端基于webrtc实现直播 html5嵌入地图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93285.html

H5 如何唤起百度地图 App

摘要：最近接手了一个需求，要求混合式开发，前端做好后将页面嵌入到和中，需要用到百度地图的地图导航。所以需要换一种方式，总的思路是采用轮询的方式在内尝试唤起百度地图唤起失败后，判断是处于前台还是后台，如果是前台，则打开端百度地图。最近接手了一个需求，要求混合式开发，前端做好 h5 后将页面嵌入到 ios 和 android 中，需要用到百度地图的地图导航。具体功能点如下：如果手机端（io...

yankeys 2019-08-23 14:57 评论0 收藏0
WEB之常见工作问题总结（1-20）

摘要：第三种，使用格式，即在中请求参数处理跨域问题当然请求方式只能是。最后发现有网友说版本不稳定引起的，于是把百度地图回退到了，结果还真是可以了。请问在移动端页面中播放优酷里面的视频，怎样实现 1.web扫码登录怎么实现，思路步骤 WEB平台手机第1步生成二维码第2步（ajax监控后台）扫码第3步 ...

genedna 2019-08-22 13:40 评论0 收藏0