uniapp 区域地图

<template>
	<view class="map-content">
		<view class="map" id="map"></view>
	</view>
</template>

<script>
	import AMap from "../../static/js/map.js"

	export default {
    
    
		data() {
    
    
			return {
    
    
				title: 'hello',
				provider: '',
				map: null,
				zoom: 5,
				resAmap: null,
				scrollH: 500,
				scrollW: 500,
				initLat: 38.913423, //初始维度
				initLng: 116.368904, //初始经度
				covers: [],
				LlayAroundGroupOpen: true, //l网周边
			}
		},
		methods: {
    
    
			async initAMap() {
    
    
				try {
    
    
					this.resAmap = await AMap();
					this.$nextTick(function() {
    
    
						var SOC = 'CHN'
						var colors = {
    
    };
						var GDPSpeed = {
    
    
							'520000': 10, //贵州
							'540000': 10, //西藏
							'530000': 8.5, //云南 
							'500000': 8.5, //重庆
							'360000': 8.5, //江西
							'340000': 8.0, //安徽
							'510000': 7.5, //四川
							'350000': 8.5, //福建
							'430000': 8.0, //湖南
							'420000': 7.5, //湖北
							'410000': 7.5, //河南
							'330000': 7.0, //浙江
							'640000': 7.5, //宁夏
							'650000': 7.0, //新疆
							'440000': 7.0, //广东
							'370000': 7.0, //山东
							'450000': 7.3, //广西
							'630000': 7.0, //青海
							'320000': 7.0, //江苏
							'140000': 6.5, //山西
							'460000': 7, // 海南
							'310000': 6.5, //上海
							'110000': 6.5, // 北京
							'130000': 6.5, // 河北
							'230000': 6, // 黑龙江
							'220000': 6, // 吉林
							'210000': 6.5, //辽宁
							'150000': 6.5, //内蒙古
							'120000': 5, // 天津
							'620000': 6, // 甘肃
							'610000': 8.5, // 甘肃
							'710000': 2.64, //台湾
							'810000': 3.0, //香港
							'820000': 4.7 //澳门

						}
						var getColorByDGP = function(adcode) {
    
    
							if (!colors[adcode]) {
    
    
								var gdp = GDPSpeed[adcode];
								if (!gdp) {
    
    
									colors[adcode] = 'rgb(227,227,227)'
								} else {
    
    
									var r = 0;
									var g = 6;
									var b = 43;
									var a = gdp / 8;
									colors[adcode] = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
								}
							}
							return colors[adcode]
						}

						var disCountry = new this.resAmap.DistrictLayer.Country({
    
    
							zIndex: 10,
							SOC: 'CHN',
							depth: 1,
							styles: {
    
    
								'nation-stroke': '#ff0000',
								'coastline-stroke': '#0088ff',
								'province-stroke': 'grey',
								'fill': function(props) {
    
    
									return getColorByDGP(props.adcode_pro)
								}
							}
						})

						var map = new this.resAmap.Map("map", {
    
    
							zooms: [4, 10],
							center: [106.122082, 33.719192],
							zoom: 4,
							isHotspot: false,
							defaultCursor: 'pointer',
							layers: [
								disCountry
							],
							viewMode: '2D',
							resizeEnable: true
						})
						var styleName = "amap://styles/darkblue";
						map.setMapStyle(styleName);

					})
				} catch (e) {
    
    
					console.log(e)
				}
			}
		},

		onLoad() {
    
    
			this.initAMap()
		},


	}
</script>

<style>
	.map {
    
    
		width: 100%;
		height: 100vh;
	}
</style>