vue高德地图的使用

(1)、安装依赖：

npm install vue-amap -S


2.第2步
)vue.config.js中引入：

module.exports = {
    // 是否为生产环境构建生成 source map？
    productionSourceMap: false,
    configureWebpack: {
        externals: {
            "AMap": "AMap"
        }
    },
    // webpack-dev-server 相关配置
    devServer: {
        // host: "localhost",
        open: true,
        port: 8001,
        overlay: {
            errors: false,
            warnings: false
        }
    }
3.index.html引入 密钥key需要在高德地图申请
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ec817c7d9a73dae44ddbb3eb9d032a33"></script>


4.全代码
<template>
    <div>
        <div id="container" style="width:100%; height:680px; margin-top: 20px"></div>
    </div>
</template>

<script>
import AMap from 'AMap';
export default {
    name: 'home',
    data() {
        return {
            ruleForm: {
                long: null,
                lat: null,
                addr: null
            }
        };
    },
    methods: {
        init() {
            var map = new AMap.Map('container', {
                // resizeEnable: true
                zoom: 11,//级别
                center: [116.397428, 39.90923] // 中心点坐标
            });
            AMap.plugin(['AMap.ToolBar', 'AMap.OverView', 'AMap.MapType', 'AMap.Scale', 'AMap.Geolocation','AMap.Weather'], function() {
                //异步加载插件
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                    buttonOffset: new AMap.Pixel(10, 20),
                    // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,
                    // 定位按钮的排放位置, RB表示右下
                    buttonPosition: 'RB'
                });
                // 地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。继承自 AMap.Control
                // map.addControl(new AMap.ToolBar());
                // 小地图
                map.addControl(new AMap.OverView());
                // 地图类型切换插件。用户通过该插件进行地图切换。
                map.addControl(new AMap.MapType());

                map.addControl(new AMap.Weather());
                
                // 距离
                map.addControl(new AMap.Scale());
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', e => {
                    // console.log(e) // 定位成功之后做的事
                    // 定位成功之后再定位处添加一个marker
                    var marker = new AMap.Marker({
                        position: [e.position.lng, e.position.lat] // （e.position）--->定位点的点坐标, position ---> marker的定位点坐标，也就是marker最终显示在那个点上，
                    });
                    map.add(marker);
                });
            });

            var geocoder, marker;

            function regeocoder(lnglatXY, that) {
                AMap.plugin('AMap.Geocoder', function() {
                    var geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: 'all'
                    });
                    geocoder.getAddress(lnglatXY, function(status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            var address = result.regeocode.formattedAddress;
                            that.ruleForm.addr = address;
                            let contentString = '<div class="cafe-info-window">' +
                                '<div class="cafe-name">' + result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + '</div>' +
                                '<div class="cafe-address">' +
                                '<span class="street">' + result.regeocode.addressComponent.district + '</span>' +
                                '<span class="city">' + result.regeocode.addressComponent.township + '</span> ' +
                                '<span class="state">' + result.regeocode.addressComponent.street + '</span>'
                            '</div>' +
                            '</div>'
                            contentString = result.regeocode.formattedAddress;
                            var infoWindow = new AMap.InfoWindow({
                                content: contentString//信息窗体的内容
                            })
                            infoWindow.open(map, marker.getPosition()); //信息窗体打开
                        }
                    });
                    if (!marker) {
                        marker = new AMap.Marker();
                        map.add(marker);
                    }
                    marker.setPosition(lnglatXY);
                });
            }

            var that = this;
            // 点击事件
            map.on('click', function(e) {
                console.log(e)
                var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
                regeocoder(lnglatXY, that);
                that.ruleForm.long = e.lnglat.getLng();
                that.ruleForm.lat = e.lnglat.getLat();
            });

            // 鼠标事件
            map.on('dragging', function(e) {
                // console.log('鼠标拖拽移动点标记时触发事件');
                // console.log(e);
            }).on('dragend', function(e) {
                // console.log('点标记拖拽移动结束触发事件');
                // console.log(e);
                // console.log(map);
            });

            // map.plugin(["AMap.ToolBar"],function(e){
            //     //加载工具条
            //     var tool = new AMap.ToolBar();
            //     console.log(tool)
            //     map.addControl(tool);
            // });
           
        map.plugin(['AMap.ToolBar'],
            function(){
              let toolopt = {
                    offset :new AMap.Pixel(10,10),//相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
                    /*
                     *控件停靠位置
                     *LT:左上角;
                     *RT:右上角;
                     *LB:左下角;
                     *RB:右下角;
                     *默认位置：LT
                     */
                    position : 'LT',
                    ruler : true,//标尺键盘是否可见，默认为true
                    noIpLocate : false,//定位失败后，是否开启IP定位，默认为false
                    locate : true,//是否显示定位按钮，默认为false
                    liteStyle : false,//是否使用精简模式，默认为false
                    direction : true,//方向键盘是否可见，默认为true
                    autoPosition : true,//是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，在支持HTML5的浏览器中有效，默认为false
                    locationMarker : AMap.Marker({map: map}),
                    /**
                     *是否使用高德定位sdk用来辅助优化定位效果，默认：false.
                     *仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用
                     *注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，
                     *还需要调用高德定位idk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；
                     *不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册
                     */
                    useNative : false
                }
                var toolbar  = new AMap.ToolBar(toolopt);
                //toolbar.hide();//隐藏toolbar

                map.addControl(toolbar);
                //启动监听
                toolbar.on('location',function(){
                    // alert(toolbar.getLocation());    
                    console.log(toolbar.getLocation())
                })
            }
        );
        }
    },

    mounted() {
        this.init();
    },

    deactivated() {}
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

#map {
    margin-top: 20px;
    height: 680px;
}
</style>