Vue集成百度地图实现位置选择功能

目录

• Vue集成百度地图实现位置选择
• 百度地图选择地址效果
• 集成百度地图的具体实现
• 第一步：引入百度地图 JavaScript API v3.0 文件
• 第二步：编写百度地图选择位置组件
• 第三步：使用百度地图选择位置组件
• 百度地图Web开发
• 参考文章

Vue集成百度地图实现位置选择

• 需求：添加门店时，需要选择门店的省、市、区、详细地址、以及门店的经纬度信息。
• 解决方案：集成百度地图API，通过在地图上搜索或者点击获取门店的具体位置信息。

百度地图选择地址效果

具体效果如下图所示

集成百度地图的具体实现

技术方案： Vue + ElementUI + 百度地图 JavaScript API v3.0

工程目录结构图：

```
ProjectName              // 项目名称    
├── public               // 公共文件         
│       └── index.html   // html模板
├── src                  // 源代码
│       └── components   // 全局共用组件
│       		└── BMapAddressSelect  // 百度地图位置选择组件
│       └── views        // 页面文件

• 申请成为百度地图开发者并获取秘钥

参考文档：https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey

第一步：引入百度地图 JavaScript API v3.0 文件

修改文件：public -> index.html

第二步：编写百度地图选择位置组件

新增文件：src -> components -> BMapAddressSelect -> index.vue

第三步：使用百度地图选择位置组件

百度地图Web开发

• JavaScript API v3.0 (2D地图 标准版)
• API文档地址：https://lbsyun.baidu.com/index.php?title=jspopular3.0
• 示例地址：https://lbsyun.baidu.com/index.php?title=open/jsdemo3.0
• JavaScript API v2.0 （没有维护了）
• JavaScript API v1.0（没有维护了）
• JavaScript API Lite v1.0 (2D地图 移动端H5版)
• API文档地址：https://lbsyun.baidu.com/index.php?title=jspopularLiteV1
• 示例地址：https://lbsyun.baidu.com/index.php?title=open/jsdemoLite
• JavaScript API GL v1.0 (3D地图 )
• API文档地址：https://lbsyun.baidu.com/index.php?title=jspopularGL
• 示例地址：https://lbsyun.baidu.com/jsdemo.htm

参考文章

https://www.cnblogs.com/googlegis/p/14640897.html

https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld

https://zhuanlan.zhihu.com/p/506032108

到此这篇关于Vue集成百度地图实现位置选择的文章就介绍到这了,更多相关vue百度地图位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！