• 写这篇文章主要是为了向大家分享，也是为了自己做一个小笔记吧。
• 近期做的一个项目，就是想要实现根据输入的一些关键词然后自动生成相关位置，获取用户想要的位置坐标。
• 废话不多说，咱们直接进入正文，上代码

map.js(引入到views同级的utils文件夹下)

      export function MP(ak) {
          return new Promise(function (resolve, reject) {
               window.init = function () {
              resolve(BMap)
         }
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);
      })
    }

vue页面使用的代码

 <template>
    <input type="text" id="suggestId" name="address_detail" placeholder="如门牌号等" v-model="address_detail" class="input_style">
    <div id="allmap"></div>
 </template>
<script>
import {MP} from '../../map'

 data(){
      return{
         address_detail: null, //详细地址
         userlocation:{lng:"",lat:""},          
      }
 },
mounted(){
      this.$nextTick(function () {
          MP("你的ak").then( BMap => {
            var th = this
            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(116.404, 39.915); // 创建点坐标
            map.centerAndZoom(point,15);
            map.enableScrollWheelZoom();
            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
              {"input" : "suggestId"
              ,"location" : map
            })
            var myValue
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
              var _value = e.item.value;
              myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
               this.address_detail = myValue
              setPlace();
            });

            function setPlace(){
              map.clearOverlays();    //清除地图上所有覆盖物
              function myFun(){
                th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(th.userlocation, 18);
                map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
              }
              var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
              });
              local.search(myValue);
            }
            })
          })
  },
</script>

<style scoped>
   #allmap{
        width: 400px;
        height: 400px;
        font-family: "微软雅黑";
        border:1px solid green;
    }
</style>

下面是效果图