vue高德地图API使用介绍,实现搜所标点功能

效果图

功能实现:搜所查询标点,及标记拖拽事件

1.安装插件
API链接: https://developer.amap.com/api/javascript-api/reference/map

import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
    key: '你的key',//在官网注册个key
    //所需插件
    plugin: [ 'AMap.PlaceSearch','AMap.Autocomplete','AMap.Marker','AMap.Geolocation','AMap.Geocoder','AMap.InfoWindow'],
    v: '1.4.2'//版本
});

2.在vue中使用

    <div id="box">
        <input type="text" id="keyword" v-model="dress" placeholder="请输入地址"/>
        <!--地图容器 amap-box-->
        <div id="amap-box"></div>
    </div>

        data() {
            return {
                dress: '',//地址
                map: null,//地图实例
            };
        },
        mounted() {
            setTimeout(() => {
                this.setMap();
            }, 500)
        },
        methods: {
            setMap() {
                let _this = this;
                _this.map = new AMap.Map('amap-box', {//创建地图实例
                    resizeEnable: true,//是否监控地图容器尺寸变化，默认值为false
                    zoom: 15,//地图显示的缩放级别
                    keyboardEnable: false,//地图是否可通过键盘控制,默认为true
                });
                //创建搜所实例,绑定输入框,自动搜所
                let autoComplete = new AMap.Autocomplete({
                    input: 'keyword',
                });
                let marker = null;
                let geoLocation = new AMap.Geolocation();//自身定位实例
                //获取当前位置坐标
                geoLocation.getCurrentPosition(function (status, result) {
                    if (status === 'complete') {
                        //设置标记点实例
                        marker = new AMap.Marker({
                            map: _this.map,//地图实例
                            //标记点位置, AMap.LngLat构造函数
                            position: new AMap.LngLat(result.position.lng, result.position.lat, false),
                            draggable: true
                        });
                        //设置地图初始中心点
                        let LngLat = new AMap.LngLat(result.position.lng, result.position.lat, false);
                        _this.map.setCenter(LngLat);
                        _this.getAddress(LngLat);
                        //拖拽事件移动标记点
                        AMap.event.addListener(marker, "dragend", function (e) {
                            _this.dress = '';
                            const LngLat = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat, false);
                            _this.map.setCenter(LngLat);
                            _this.getAddress(LngLat);
                        });
                        //搜所点击事件
                        AMap.event.addListener(autoComplete, "select", function (e) {
                            const LngLat = new AMap.LngLat(e.poi.location.lng, e.poi.location.lat, false);
                            marker.setPosition(LngLat);
                            _this.map.setCenter(LngLat);
                            _this.getAddress(LngLat);
                        });
                    } else {
                        console.log('获取失败');
                    }

                });
            },
            //设置地点
            getAddress(lngLat) {
                let _this = this;
                //定位实例
                let geoCoder = new AMap.Geocoder();
                geoCoder.getAddress(lngLat, function (status, result) {
                    if (status === 'complete') {
                        let str = result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + result.regeocode.addressComponent.district
                            + result.regeocode.addressComponent.street + result.regeocode.addressComponent.streetNumber;
                        _this.setDescribe(str, _this.map, lngLat)
                    } else {
                        console.log('解析失败');
                    }
                });
            },
            //设置描述框
            setDescribe(content, map, lngLat) {
                //描述框实例
                let infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: "<div class='describe'>" + content + "</div>",//提示框所显示内容
                    offset: new AMap.Pixel(16, -40) //偏移量
                });
                infoWindow.open(map, lngLat);
            }
        }
        //样式
   <style>
    #amap-box {
        width: 100%;
        height: 500px;
    }

    .describe {
        padding: 10px;
        text-align: center;
        background-color: white;
        border: 1px solid gainsboro;
        border-radius: 10px;
        font-size: 14px;
    }

    #keyword {
        width: 300px;
        border: 1px solid gainsboro;
        border-radius: 6px;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
        position: fixed;
        top: 15px;
        left: 20px;
        z-index: 1;
        padding: 5px 15px;
        line-height: 32px;
        font-size: 14px;
    }

   </style>