vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)

效果图如下:

vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第1张图片
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第2张图片

1.申请百度地图密钥(ak)-- http://lbsyun.baidu.com/index.php?title=jspopular

(1)百度地图开放平台–开发文档–web开发–JavaScript API–服务介绍–产品简介–申请密钥(ak)
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第3张图片
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第4张图片
(2)查看应用–创建应用–应用名称、应用类型(vue中使用百度地图需要选择浏览器端,因为浏览器端的启用服务包括Javascript API)、Referer白名单–提交
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第5张图片
(3)查看应用–访问应用(AK)
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第6张图片

2.在index.html中添加百度地图JavaScript API接口
  
      

在这里插入图片描述

3.在build文件的webpack.base.conf.js配置文件中的module.exports配置BMap(创建BMap对象),与entry,output,module平级
  externals: {
   	 "BMap": "BMap"
  },

vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第7张图片

4.地图组件中



在这里插入图片描述
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第8张图片
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第9张图片
vue-cli中使用百度地图(根据输入框输入的内容,获取详细地址)_第10张图片

你可能感兴趣的:(vue框架)