vue 使用高德地图点击标记点以及经纬度转地理位置

1、在index.html这种引入高德地图

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=your key"></script> 

2、在webpack.base.conf.js 代码最后面引入

externals: {
    'AMap': 'AMap',
  }

3、在vue文件中使用

<template>
<div id="my_container"></div>
</template>
<script>
    import AMap from 'AMap'

    export default {
        name: "company_manage",
        data () {
            return {
                ruleForm: {
                    name: '',
                    phone: '',
                    addr: '',
                    long: '',
                    lat: '',
                    start_work_time: '',
                    end_work_time: '',
                },
            }
        },
        mounted:function () {
            this.init()
        },
        methods: {
            init() {
                var map = new AMap.Map('my_container',{
                  resizeEnable: true,
                  zoom: 18,
                })
                AMap.plugin('AMap.Geolocation',function(){ //异步加载插件
                    var geolocation = new AMap.Geolocation()
                    map.addControl(geolocation)
                })
                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
                            }
                        });  
                        if(!marker){
                            marker = new AMap.Marker();
                            map.add(marker);
                        }
                        marker.setPosition(lnglatXY);
                    })    
                }
                var that = this
                map.on('click', function(e) {
                    var lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];
                    regeocoder(lnglatXY,that)
                    that.ruleForm.long = e.lnglat.getLng()
                    that.ruleForm.lat = e.lnglat.getLat()
                });
            },
        },
    }
</script>

<style scoped>
#my_container{
    margin-left: 110px;
    height: 300px;
    width: calc(100% - 110px);
}
</style>