前端vue项目中，高德部分插件/API的使用

根据官网指引获取key和密钥，点这里

h5项目

• 登录 高德开放平台控制台 ，如果没有开发者账号，请 注册开发者。
• 如果获取到了key和密钥，确定自己已经在入口文件 index.html文件中正确引入了 高德官方的js

window._AMapSecurityConfig = {
	securityJsCode: '12345678913131513132131313131'
}
// v:高度js版
// key: 高德文档中复制过
// plugin：插件，需要什么插件就写
//securityJsCode和key不同，具体看文档 
<script src="https://webapi.amap.com/maps?v=2.0&key=1234568978976514313513514354131&plugin=AMap.MarkerCluster"></script>

// 如果需要多个插件
<script src="https://webapi.amap.com/maps?v=2.0&key=1234568978976514313513514354131&plugin=AMap.MarkerCluster,AMap.GeoJSON,AMap.Weather"></script>

• 普通地图

只需要地图的话，不需要plugin

<div id="mapDiv" style="width: 200px;height: 200px"></div>

data() {
	return {
		map: null,
	}
}
this.map = new AMap.Map('mapDiv', {
	center: [110.131212122, 30.1212121212], // 必须：经纬度
})

• 点聚合（地图撒点标记）

官方文档示例

<div id="mapDiv" style="width: 200px;height: 200px"></div>

import myIcon from '../images/myIcon.png'

data() {
	return {
		map: null,
	}
}
this.map = new AMap.Map('mapDiv', {
	center: [110.131212122, 30.1212121212], // 必须：经纬度
})

function() {
	// 如果需要遍历可以用这个
	// forEach(item => {
		const marker = new AMap.Marker({
			position: new AMap.LngLat('标记点的经','标记点的纬'),
			// position: new AMap.LngLat(item.j,item.w),
			icon: new AMap.Icon({
				size: new AMap.Size(30, 36),
				image: myIcon,
				imageSize: new AMap.Size(30, 36),
			}),
		})
		// 给每个标记点添加事件
		marker.on('click', () => {
			// 点击当前标记点的逻辑
		})
		 marker.setMap(this.map)
	// })
}

• GeoJSON

官方文档示例

// index.html文件中药加上插件AMap.GeoJSON

<div id="mapDiv" style="width: 200px;height: 200px"></div>

// geojs.js文件内容
// export default {
// 	*****
// }

import geojs from './geojs.js'
import myIcon from '../images/myIcon.png'

data() {
	return {
		map: null,
	}
}
this.map = new AMap.Map('mapDiv', {
	center: [110.131212122, 30.1212121212], // 必须：经纬度
})
var geojson = new AMap.GeoJSON({
	/// geoJSON: 'geojson字段可以定义在js文件中，也可以直接放这里，但大部分情况是放js中的，因为字段太大了',
	geoJSON: geojs,
	// 还可以自定义getMarker和getPolyline
 	getPolygon: function (geojson, lnglats) {
 		return new AMap.Polygon({
 			path: lnglats, // 绘制的点坐标
 			fillColor: 'aqua', // 区域填充颜色
 			fillOpacity: 1, // 填充透明度
			strokeColor: 'white', // 填充区域border 线颜色
 		})
 	},
 })
 this.map.add(geojson)

• 某城市天气

官方文档示例

// index.html文件中药加上插件AMap.Weather
// 不需要地图元素，直接使用AMap获取
getWeather() {
	const that = this
	AMap.plugin('AMap.Weather', function () {
		//创建天气查询实例
		var weather = new AMap.Weather()
	
		//执行实时天气信息查询
		weather.getLive('北京市', function (err, data) {
			console.log(err, data)
			if (data.info) {
				that.weather = data
				console.log(that.weather)
			}
		})
	})
},