1.配置key
- 新建应用
2.接入api
3d地图要把密钥引上,不然出不来
//我这用的是3d地图
<script>
window._AMapSecurityConfig = {
//密钥
securityJsCode:'7a35fac1504c6e2581242980024fc986',
}
</script>
//这里写上key
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=创建的key&plugin=Map3D,AMap.DistrictSearch"></script>
<script language="javascript">
var opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
var district = new AMap.DistrictSearch(opts);
district.search('吕梁市', function(status, result) {
console.log(status,result)
var bounds = result.districtList[0].boundaries;
var mask = []
for(var i =0;i<bounds.length;i+=1){
mask.push([bounds[i]])
}
var map = new AMap.Map('map', {
mask:mask,
center:[111.134335,37.524366],
disableSocket:true,
viewMode:'3D',
showLabel:false,
labelzIndex:130,
mapStyle:"amap://styles/darkblue",
pitch:40,
zoom:9,
layers:[
new AMap.TileLayer.RoadNet({
//rejectMapMask:true
}),
new AMap.TileLayer.Satellite()
]
});
//添加高度面
var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
map.add(object3Dlayer)
var height = -100000;
var color = 'rgba(10,35,93,0.2)';//rgba
var wall = new AMap.Object3D.Wall({
path:bounds,
height:height,
color:color
});
wall.transparent = true
object3Dlayer.add(wall)
});
</script>
3.隐藏左下角的文字logo等
vue的话,前面加v-deep
.amap-logo {
display: none;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0;
}