VUE 高德地图JS API --- 快速创建地图

1、实现步骤

1.1 准备

成为开发者并创建 key：为了正常调用 API，请先注册成为高德地图开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。

1.2 页面准备

<template>
    <div class="container"> <!-- 预设用于添加自定义内容 -->
        <div class="map" id="container">
		</div>	
	</div>
</template>



<style>
    .container {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
    }
    .map {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
    }
</style>

1.3 JS API 的加载和地图初始化

使用 JS API Loader 来加载，引入在控制台申请的 key 和 安全密钥。

<script>
    export default {
        data() {
            return {
                AMap: null,
            }
        },
        // 钩子函数
        created() {
            this.initAmap()
        },

        methods: {
            //初始化地图
            initAmap() {
                window._AMapSecurityConfig = {
				    securityJsCode:'「你申请的安全密钥」',
			    }
                AMapLoader.load({
                    "key": "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
                    "version": "2.0",  // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
                    "plugins": [        // 需要使用的插件列表，如比例尺'AMap.Scale'等
                        'AMap.Scale',    //比例尺
                    ]
                }).then((AMap) => {
                    this.AMap = AMap;        // 让AMap 可以全局调用
                    this.map = new this.AMap.Map('container',{
                        viewMode: '2D',  // 默认使用 2D 模式
					    zoom: 12,	//显示缩放级别
					    zooms: [2, 29],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					    center: [116.3409, 39.87546]  //初始化地图中心点
                    })
                })
            },
        }
    }
</script>

1.4 为地图点标记 Marker，并添加事件

JS API 提供了再地图之上绘制覆盖物的能力，使用 add() 方法添加一个默认的点标记 Marker。

提示：代码需添加到 .then(AMap)=>{}) 中，即：AMap对象可以取到后执行，同理后边步骤的代码都有此要求。

const marker = new AMap.Marker({
    position: [116.39, 39.9],    // 位置
})
this.map.add(marker);    // 添加到地图

marker.on("click", onMarkerClick);    // onMarkerClick为自定义事件

1.5 为地图添加折线 Polyline

向点标记一样，通过 add() 方法向地图添加这群 Polyline。

const lineArr = [
    [116.368904, 39.913423],
    [116.382122, 39.901176],
    [116.387271, 39.912501],
    [116.398258, 39.904600]
]
const polyline = new this.AMap.Polyline({
    path: lineArr, //设置线覆盖物路径
    strokeColor: "#3366FF", //线颜色
    strokeWeight: 5, //线宽
    strokeStyle: "solid", //线样式
})
map.add(polyline);