vue中使用百度地圖，懸浮窗搜索功能

https://www.cnblogs.com/shuaifing/p/8185311.html 侵刪

<template>
    <div id="all">
    <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
    <div id="allmap"></div>
    </div>
</template>
<script>
 //import {MP} from '../../map'
   export default {
       data(){
           return {
               address_detail: null, //詳細地址
               userlocation: {lng: "", lat: ""},
           }
       },
       mounted(){
           this.$nextTick(function () {

                   var th = this
                   // 創建Map實例
                   var map = new BMap.Map("allmap");
                   // 初始化地圖,設置中心點坐標，
                   var point = new BMap.Point(121.160724,31.173277); // 創建點坐標，漢得公司的經緯度坐標
                   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);

                       //測試輸出坐標（指的是輸入框最後確定地點的經緯度）
                       map.addEventListener("click",function(e){
                           //經度
                           console.log(th.userlocation.lng);
                           //維度
                           console.log(th.userlocation.lat);

                       })
                   }

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