VUE加载高德地图，实现按坐标系定位

一、新增加载地图页面

1、在项目中新建vue页面，设置div的id="container"

<template>
        <div id="container"></div>
<template>

2、添加组件

<div class="input">
            <el-row :gutter="5">
                <el-col>
                    <el-input v-model="gdCoordinate"placeholder="GEO坐标">></el-input>
                </el-col>
                <el-col span="1">
                    <li-button type="primary" @click="getCoordinate()">定位</el-button>
                </el-col>
            </el-row>
        </div>

二、异步创建script标签amap.js

1、新建js文件

export default function MapLoader () {
    return new Promise((resolve, reject) => {
        if (window.AMap) {
            resolve(window.AMap)
        } else {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://webapi.amap.com/maps?v=1.4.8&key=注册高德开发者账户创建&callback=initAMap';
            s.onerror = reject;
            document.body.appendChild(s);
        }
        window.initAMap = ()=> {
            resolve(window.AMap)
        }
    })
}

三、地图页引入script标签，添加标记方法

1、在vue页面引入script标签

import MapLoader from '@/js标签目录/amap'

2、添加标记方法

getCoordinate() {
                //分割字符串为数组对象
                var coordinate = this.gdCoordinate.split(',');
                var lng = coordinate[0];
                var lat = coordinate[1];
                console.log(lng,lat)
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(lng,lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: "位置标题",
                    zoomToAccuracy: true,
                });
                // 将创建的点标记添加到已有的地图实例：
                map.add(marker);

                //setFitView自适应显示标记
                var newCenter = map.setFitView();
                newCenter.getCenter();
            },

四、实现效果

1、加载页面

image.png

2、定位效果

image.png

五、常见问题

1、使用window.onload加载页面，不刷新页面加载不出来
因vue文件不是首页，window.onload只有加载完成整个页面时触发，页面加载完成后再切换到地图vue页面，此时不会触发window.onload
2、异步加载，首次进入地图页面不加载地图，切换vue才加载
需在script标签src值中添加callback属性