实现流程
按顺序讲一下自己的实现过程,中间踩了好几个坑,感谢 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(() => {
// 示例代码
})
}
好了,到这里就大功告成了,哈哈。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。