vue中引用高德地圖amap具體流程

引入 高德券勺，web-sdk

• 安裝 vue-amap

    npm install vue-amap

• 在html中引入
  在官網(wǎng)申請密鑰: https://lbs.amap.com 申請密鑰

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key = 你自己的Key"></script>

或者

    <script type="text/javascript">
        // 初始化地圖
        window.VueAMap.initAMapApiLoader({
            key: '你自己的Key',
            plugin: [
                'AMap.Autocomplete',
                'AMap.PlaceSearch',
                'AMap.Scale',
                'AMap.OverView',
                'AMap.ToolBar',
                'AMap.MapType',
                'AMap.PolyEditor',
                'AMap.CircleEditor',
                'AMap.Geolocation',
                'AMap.ElasticMarker',
                ...
            ],
            uiVersion: '1.0',
            v: '1.4.4',
        });
    </script>

單純獲取當(dāng)前位置信息

• 獲取經(jīng)緯度
  用的TypeScript寫法沦零，不懂的可以去TypeScript官網(wǎng)查詢下

private getMap() {
    let map: any;
    let geolocation: any;
    const self = this;
    map = new AMap.Map('container', {
        resizeEnable: true,
    });
    map.plugin('AMap.Geolocation', (o: any) => {
        geolocation = new AMap.Geolocation({
　　　　enableHighAccuracy: true, // 是否使用高精度定位，默認(rèn):true
　　　　timeout: 20000, // 超過10秒后停止定位头镊，默認(rèn)：無窮大
　　　　buttonPosition: 'RB',
        });
        geolocation.getCurrentPosition();
        // tslint:disable-next-line:no-unused-expression
        new AMap.event.addListener(geolocation, 'complete', function onComplete(data: any) {
            const getLongitude = data.position.getLng();
            const getLatitude = data.position.getLat();
            self.latitude = getLongitude;
            self.longitude = getLatitude;
            // self.getData();
        });
    });
}

最后在你需要用到的地方去調(diào)this.getMap()

顯示地圖

• 引入地圖標(biāo)簽

<el-amap :zoom='zoom' :center='center' :plugin="plugin" :events="events"  class="amap-demo">
    <el-amap-marker
        v-for="(marker, index) in markers"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :key="index"
        :clickable="true"
        vid="marker"
    />
</el-amap>

• 定義變量

private lng: any = 0;
private lat: any = 0;
private center: any = []; // 地圖中心點(diǎn)
private loaded: boolean = true;
private zoom: any = '13'; // 地圖放大限制
private markers: any = [];
private plugin: any = [];
private events: any = {};

• 配置地圖

const self = this;
self.plugin = [
    {
        enableHighAccuracy: true, //是否使用高精度定位，默認(rèn):true
        timeout: 100, //超過10秒后停止定位，默認(rèn)：無窮大
        maximumAge: 0, //定位結(jié)果緩存0毫秒孽水，默認(rèn)：0
        convert: true, //自動偏移坐標(biāo)，偏移后的坐標(biāo)為高德坐標(biāo)城看，默認(rèn)：true
        showButton: true, //顯示定位按鈕女气，默認(rèn)：true
        buttonPosition: 'RB', //定位按鈕停靠位置测柠，默認(rèn)：'LB'炼鞠，左下角
        showMarker: true, //定位成功后在定位到的位置顯示點(diǎn)標(biāo)記，默認(rèn)：true
        showCircle: true, //定位成功后用圓圈表示定位精度范圍轰胁，默認(rèn)：true
        panToLocation: true, //定位成功后將定位到的位置作為地圖中心點(diǎn)谒主，默認(rèn)：true
        zoomToAccuracy: true, //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見，默認(rèn)：false
        extensions: 'all',
        pName: 'Geolocation',
        events: {
            init: (o: any) => {
                // o 是高德地圖定位插件實(shí)例
                o.getCurrentPosition((status: any, result: any) => {
                    if (result && result.position) {
                        self.center = [result.position.lng, result.position.lat];
                        self.loaded = true;
                        self.lng = result.position.lng;
                        self.lat = result.position.lat;
                        self.markers[0].position = [self.lng, self.lat]; // 標(biāo)記默認(rèn)在定位處
                    }
                });
            },
        },
    },
];
self.events = { //選點(diǎn)
    init: (o: any) => {
        self.lng = o.getCenter().lng;
        self.lat = o.getCenter().lat;
        o.getCity((result: any) => {});
    },
    click(e: any) {
        self.lng = e.lnglat.lng;
        self.lat = e.lnglat.lat;
        self.markers[0].position = [self.lng, self.lat];
    },
};
self.markers = [ // 標(biāo)記點(diǎn)
    {
        position: self.center,
        anchor: 'center',
        events: {
            // 點(diǎn)擊觸發(fā)
            click: (e: any) => {
                self.lng = e.lnglat.lng;
                self.lat = e.lnglat.lat;
                self.loaded = true;
            },
            // 移動觸發(fā)
            dragend: (e: any) => {
                self.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
                self.lng = e.lnglat.lng;
                self.lat = e.lnglat.lat;
            },
        },
        visible: true,
        draggable: true,
    },
];