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;
                }
            },
}