使用 vue2 渲染高德地图

# 展示地图

方式一：官方推荐使用 JSAPI Loader 来加载，引入在控制台申请的 key 和安全密钥。
NPM 方式安装使用 Loader
npm i @amap/amap-jsapi-loader --save

script 中引入 AMapLoader 和安全密钥

	import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
	securityJsCode: '安全密钥'
	}
	export default {
	}

方式二: JSAPI key 搭配静态安全密钥以明文设置（不安全，建议开发环境用）
在 index.html 中写入代码

	<script type="text/javascript">
	window._AMapSecurityConfig = {
	securityJsCode:'安全密钥',
	}
	</script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=key值"></script>

创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性
methods 中构建初始化地图方法
mounted 生命周期中调用方法对页面进行渲染
完整代码

	<template>
	<div id="container">

	</div>
	</template>

	<script>
	import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
	securityJsCode: '54511095faf2a894afc040995694b1c8'
	}
	export default {
	data() {
	return {
	map: null
	}
	},
	methods: {
	initMap() {
	AMapLoader.load({
	key: '62a0edf82e46f928397e075b1b89a225', // 申请好的 Web 端开发者 Key，首次调用 load 时必填
	version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
	plugins: ['AMap.Scale'] // 需要使用的的插件列表，如比例尺 'AMap.Scale' 等
	}).then(AMap => {
	this.map = new AMap.Map('container', {
	// 设置地图容器 id
	viewMode: '3D', // 是否为 3D 地图模式
	zoom: 10, // 初始化地图级别
	center: [121.473667, 31.230525], // 初始化地图中心点位置
	})
	})
	},
	},
	mounted() {
	this.initMap()
	}
	}
	</script>

	<style scoped>
	#container {
	padding: 0px;
	margin: 0px auto;
	width: 30vw;
	height: 30vw;
	}
	</style>

这样就绘制出一个地图了，你还可以设置它的主题，非常好看！

# 插件的使用

JS API 提供了众多的插件功能，需要引入之后才能使用这些插件的功能。这些功能包括：

服务类，如：POI 搜索 PlaceSearch、输入提示 AutoComplete、路线规划 Driving/Walker/Transfer/Riding/Truck、地理编码 Geocoder、公交线路 LineSearch、公交站点 StationSearch、天气查询 Weather 等；
地图控件，如：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation 等；
矢量图形编辑工具，如折线 / 多边形编辑器 PolyEditor、圆形编辑器 CircleEditor 等；
工具类，如鼠标绘制工具 MouseTool、测距工具 RangingTool 等。

使用插件的功能通常需要三个步骤：

	initMap() {
	AMapLoader.load({
	key: '62a0edf82e46f928397e075b1b89a225', // 申请好的 Web 端开发者 Key，首次调用 load 时必填
	version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
	plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'] // 需要使用的的插件列表，如比例尺 'AMap.Scale' 等
	}).then(AMap => {
	this.map = new AMap.Map('container', {
	// 设置地图容器 id
	viewMode: '3D', // 是否为 3D 地图模式
	zoom: 10, // 初始化地图级别
	center: [121.473667, 31.230525], // 初始化地图中心点位置
	mapStyle: 'amap://styles/darkblue', // 设置地图的显示样式
	})
	// 使用插件
	this.map.addControl(new AMap.Geolocation())
	})
	},

适用于用户需要在地图上创建一个标记的场景
添加 Marker 实例

	this.marker = new AMap.Marker({
	position: new AMap.LngLat(115.881141, 28.681356), // 经纬度对象，也可以是经纬度构成的一维数组 [116.39, 39.9]
	title: '我的家'
	});

	// 将创建的点标记添加到已有的地图实例：
	this.map.add(this.marker);

可以一次性添加多个Marker实例，只需将每个Marker示例放入一个数组Array中。

	// 多个点实例组成的数组
	const markerList = [marker1, marker2, marker3];
	map.add(markerList)

可以为创建的 Marker 指定自定义内容

	var marker1 = new AMap.Marker({
	position: new AMap.LngLat(115.881141, 28.681356), // 经纬度对象，也可以是经纬度构成的一维数组 [116.39, 39.9]
	title: '滕王阁',
	// 自定义内容
	content:`<div style="color:white">妈妈生的</div>`
	});

当然也可以给标记绑定点击事件因为博客会和放大图片冲突就不做演示（懒）

地图上将行政区的边界绘制出来主要包含以下三步：

	var opts = {
	subdistrict: 0, // 获取边界不需要返回下级行政区
	extensions: 'all', // 返回行政区边界坐标组等具体信息
	level: 'district' // 查询行政级别为市
	};

	// 创建行政区查询对象
	this.district = new AMap.DistrictSearch(opts)

	this.district.search("南昌", (status, result) => {
	// 获取南昌的边界信息
	var bounds = result.districtList[0].boundaries;
	if (bounds) {
	// 生成行政区划 polygon
	for (var i = 0; i < bounds.length; i += 1) {// 构造 MultiPolygon 的 path
	bounds[i] = [bounds[i]]
	}
	this.polygon = new AMap.Polygon({
	map: this.map, // 指定地图对象
	strokeWeight: 4, // 轮廓线宽度
	path: bounds, // 轮廓线的节点坐标数组
	fillOpacity: 0.1, // 透明度
	fillColor: '#1187f3', // 填充颜色
	strokeColor: '#1187f3' // 线条颜色
	});
	this.map.add(this.polygon)
	this.map.setFitView(this.polygon);// 视口自适应
	}
	});