Web端嵌入百度舆图完成流程

2024年1月26日 196次阅读 来源: samsara0511

完成流程

按递次讲一下本身的完成历程，中心踩了好几个坑，谢谢 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(() => {
        // 示例代码
    })
}

好了，到这里就功德圆满了，哈哈。

    原文作者：samsara0511
    原文地址: https://segmentfault.com/a/1190000013631531
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞