基于高德地图API渲染首页

1.引入高德地图js库

key=你在高德地图官方网站申请的key。

高德开放平台 | 高德地图API

进入控制台，博主这里已经注册好了 ，没有注册好的自行注册，

 注意注册需要实名。博主三年前注册的当时没有要实名注册。

2.配置地图底色

GeoHUB

 

 只是博主配置的底图。

有喜欢的可以使用。

 js使用代码如下

Map.setMapStyle("amap://styles/c78a92b94cdeb9c4dbd0c7e7d42618dd");

3.开发

//湖北省地市州边界图 需要的朋友去我主页资源下载https://download.csdn.net/download/qq_26695613/86859743
import hubeiJson from '../../../assets/JS/hubei'

 var Map = new AMap.Map('container', {
        zoom:8,
        center: [112.008497, 30.998136],
        pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
         viewMode:this.switchValue?'2D':'3D' // 地图模式可选值：3D
});
Map.setMapStyle("amap://styles/c78a92b94cdeb9c4dbd0c7e7d42618dd");

var polygons=[];
hubeiJson.features.forEach(item => {
 var polygon = new AMap.Polygon({
 map: Map,
 strokeWeight: 2,
 path:item.geometry.coordinates,
  fillOpacity: 0.1,
   fillColor: '#CCF3FF',
   strokeColor: '#1E9FFF'
});
   polygons.push(polygon);
});
Map.add(polygons);


var content='' + '
' +
'   ' + '
' +
'
';



var marker = new AMap.Marker({
   // position: [item.gLongitude, item.gLatitude],
  position: wgs84_to_gcj02(item.gLongitude,item.gLatitude),
 // 将 html 传给 content
 content: content,
 // 以 icon 的 [center bottom] 为原点
    offset: new AMap.Pixel(-13, -15)
});


 // 将点标记添加到地图上
marker.setTitle(item.sStation);
Map.add(marker);
marker.on('click', function(){
    ... 弹窗
})