vue使用高德地图实现区域划分并获取天气

行政区域划分

加载地图先

html

//地图容器
<div class="public-map" id="container"></div>

js

export default {
	data() {
		return{
			boundary:[],
			map:null,
		   weather:{
					city: '',
					temperature: '',
					weather: '',
					windDirection: '',
				},
		}
	},
	methods:{
		//初始化地图
	getmap() {
				AMapLoader.load({
						key: '你得key',
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: ["AMap.Geolocation", "AMap.AutoComplete", 'AMap.PlaceSearch',
							"AMap.Geocoder","AMap.DistrictSearch"
						], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
						AMapUI: {
							// 是否加载 AMapUI，缺省不加载
							version: "1.1", // AMapUI 版本
							plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
						},
						Loca: {
							// 是否加载 Loca， 缺省不加载
							version: "2.0", // Loca 版本
						},
					}).then((AMap) => {
						// console.log(AMap)
						let that = this;
						this.map = new AMap.Map("container", { //设置地图容器id
							viewMode: "3D", //是否为3D地图模式
							zoom: 10, //初始化地图级别
							center: [104.937478,35.439575], //初始化地图中心点位置
							//mapStyle: 'amap://styles/darkblue',  //地图颜色
						});
						// 获取天气
						AMap.plugin("AMap.Weather", function() {
							var weather = new AMap.Weather();
							weather.getLive('xx市', (err, data) => {
								that.weather = data
							})
						});
							// 创建行政区查询对象
						let district = new AMap.DistrictSearch({
							extensions: "all",
							level: "district",
						});
						district.search("xx市", function(status, result) {
							// 获取边界信息
							let bounds = result.districtList[0].boundaries;
							that.boundary = [];
							if (bounds) {
								for (var i = 0, l = bounds.length; i < l; i++) {
									//生成行政区划polygon
									let polygon = new AMap.Polygon({
										map: that.map,
										strokeWeight: 2,
										path: bounds[i],
										fillOpacity: 0.3,
										fillColor: "#1abc9c",// 覆盖的区域颜色
										strokeColor: "#ef0ec3",//边界颜色
									});
									that.boundary.push(polygon);
								}
								that.map.add(that.boundary);
								// 地图自适应
								that.map.setFitView();
							}
						});
					})
				
		}
	}
}