vue 高德地圖

index.html

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=8692185c8954a7ed79ea5b6dabd7d8ba&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

a.vue

<el-input v-model="city" auto-complete="off" id="tipinput" @input='clear'></el-input>
<div class="map" style="width:1300px; height:500px">
　　<div id="container" style="width:1300px; height:500px"></div>
</div>

　　mounted() {

　　　　this.maps();

　　}

 

 

methods:{
      clear() {
                this.lng = ''
                this.lat = ''
            },
            maps() {
                //地圖加載
                let that = this;
                this.map = new AMap.Map("container", {
                    resizeEnable: true,
                    zoom: 10
                });
                // 添加左上角縮放控件
                AMap.plugin(["AMap.ToolBar"], function () {
                    that.map.addControl(new AMap.ToolBar());
                });
                //輸入提示
                var autoOptions = {
                    input: "tipinput"
                };
                var auto = new AMap.Autocomplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: this.map
                }); //構造地點查詢類
                placeSearch.search(this.city1); //默認查詢廣州
                AMap.event.addListener(auto, "select", select); //註冊監聽，當選中某條記錄時會觸發
                function select(e) {
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name); //關鍵字查詢查詢
                    that.lat = e.poi.location.lat; //經度
                    that.lng = e.poi.location.lng; //緯度
                    that.selectAdree(); //經緯度轉爲中文，實時保持名稱與經緯度一致
                }
                this.clickMap();
            },
            clickMap() {
                // 點擊地圖獲取經緯度與名稱，並標點
                let that = this;
                //爲地圖註冊click事件獲取鼠標點擊出的經緯度座標
                var clickEventListener = this.map.on("click", function (e) {
                    that.lng = e.lnglat.getLng();
                    that.lat = e.lnglat.getLat();
                    that.selectAdree();
                });
            },
            selectAdree() {
                //  經緯度轉爲中文
                let that = this;
                var lnglatXY = [that.lng, that.lat]; //已知點座標
                regeocoder();

                function regeocoder() {
                    //逆地理編碼
                    var geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: "all"
                    });
                    geocoder.getAddress(lnglatXY, function (status, result) {
                        if (status === "complete" && result.info === "OK") {
                            geocoder_CallBack(result);
                        }
                    });
                    // 刪除現有的點
                    if (that.marker) {
                        that.marker.setMap(null);
                        that.marker = null;
                    }
                    that.marker = new AMap.Marker({
                        //加點
                        map: that.map,
                        position: lnglatXY
                    });
                    that.map.setFitView();
                }

                function geocoder_CallBack(data) {
                    var address = data.regeocode.formattedAddress; //返回地址描述
                    that.city = address;
                }
            },
}