Vue中使用百度地图——根据关键字提示输入的内容,获取详细地址

知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址关键字,在百度地图上定位到准确地址,获得到经纬度和地址。

  • 效果图
    在这里插入图片描述
    在这里插入图片描述
  • 步骤:
  1. 申请百度地图密钥(ak)-- http://lbsyun.baidu.com/index.php?title=jspopular
  2. 在index.html中添加百度地图JavaScript API接口
注意:这里有上一篇文章记录的谷歌浏览器报警告的问题正确引入接口地址如下
引入百度地图
    

  1. 在build文件的webpack.base.conf.js配置文件中的module.exports配置BMap(创建BMap对象),与entry,output,module平级
    在这里插入图片描述
  2. 地图组件(案例是在模态框中使用,将经纬度等信息传给父组件,可用于新增,编辑页回显地图,只查看地图位置功能)







  • 新增:
    Vue中使用百度地图——根据关键字提示输入的内容,获取详细地址_第1张图片
  • 编辑
    Vue中使用百度地图——根据关键字提示输入的内容,获取详细地址_第2张图片
  • 只读详情
    Vue中使用百度地图——根据关键字提示输入的内容,获取详细地址_第3张图片

你可能感兴趣的:(Vue.js,百度地图)