1

实现流程

按顺序讲一下自己的实现过程,中间踩了好几个坑,感谢 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
932 声望729 粉丝