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

本文链接：https://blog.csdn.net/Amanda_wmy/article/details/86647127

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

效果图
步骤：

申请百度地图密钥（ak）-- http://lbsyun.baidu.com/index.php?title=jspopular
在index.html中添加百度地图JavaScript API接口

注意：这里有上一篇文章记录的谷歌浏览器报警告的问题正确引入接口地址如下
引入百度地图
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=dm65KD93tW9zmcZys9YvKIUj"></script>

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

<template>
  <span>
    <transition name="confirm-fade">
      <div class="confirm" v-show="showFlag" @click.stop>
        <div class="confirm-wrapper">
          <div class='topoperate'>
            <el-row>
              <el-col :span="2">
                    <div class='all_blue2'></div>
                    <div class='all_content'>
                      地图选点
                    </div>
              </el-col>
            </el-row>
          </div>
          <div :id="randomId" class='l-map'></div>
        	<div>
            <el-input clearable  v-show="!unableSearch" class='r-result' size="small" type="text" placeholder="请输入公司地址" :id="suggestId"  style="width:300px;" v-model="address_detail"/></el-input>
          </div>
          <div class="operate">
            <div class="leftSide" style='float:left'>地址：{
  
  {address_detail2 ? address_detail2: '无'}}</div>
            <div class="rightSide">
              <el-button @click="hide">{
  
  {unableSet === true ? '关闭' : '取消'}}</el-button>
              <el-button v-if="!unableSet" @click="confirm" type="primary">确