大屏地图背景透明效果,高德地图怎么才能只渲染局部地图,有全部代码详细。

效果图
在这里插入图片描述

在这里插入图片描述

需求描述:高德地图,我只需要显示中国地图,背景颜色根据父级元素显示,
可以调整。

1.https://lbs.amap.com/
在这里插入图片描述
在这里插入图片描述
退出之后,发布,选择使用与分享
在这里插入图片描述
2.接下来代码。我先说几个关键点,然后贴全部代码

在这里插入图片描述
在这里插入图片描述
代码
css部分
html,
body,
#container {
margin:0;
height: 100%;
background-color: #e8e8;;
}
body部分

<div>id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>

js部分

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 = 3;
var g = 140;
var b = 230;
var a = gdp/10;
colors[adcode] = ‘rgba(’+ r +’,’+ g +’,’+b+’,’+a+’)’;
}
}
return colors[adcode] }

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

var map = new AMap.Map(‘container’, {
resizeEnable: true, //是否监控地图容器尺寸变化
layers:[disCountry],
zooms: [4, 10],
center:[106.122082,33.719192],
zoom: 4,
isHotspot:false,
defaultCursor:‘pointer’,
viewMode:‘2D’,
resizeEnable: true,
mapStyle:‘你的样式’,
});

map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar({liteStyle:true}));
map.on(‘complete’,function(){
var layer = new AMap.LabelsLayer({
// 开启标注避让,默认为开启,v1.4.15 新增属性
collision: false,
// 开启标注淡入动画,默认为开启,v1.4.15 新增属性
animation: true,
});
for (var i = 0; i < LabelsData.length; i++) {
var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
layer.add(labelsMarker);
}
map.add(layer);
})

在前端代码中实现将高德地图替换为超图地图,您需要先了解使用的前端技术栈和地图API的使用方法。以下是一个使用JavaScript和超图API实现地图切换的示例代码: ```javascript // 初始化超图地图 var map = new SuperMap.Map("map", { controls: [ new SuperMap.Control.ScaleLine(), new SuperMap.Control.Zoom(), new SuperMap.Control.LayerSwitcher(), new SuperMap.Control.MousePosition() ] }); var layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", "http://localhost:8090/iserver/services/map-world/rest/maps/World"); layer.events.on({"layerInitialized":addLayer}); function addLayer() { map.addLayer(layer); map.setCenter(new SuperMap.LonLat(0, 0), 0); } // 使用高德地图代码 // var map = new AMap.Map('map', { // zoom: 10, // center: [116.39, 39.9] // }); ``` 在上面的代码中,我们通过调用超图API的`SuperMap.Map`类和`SuperMap.Layer.TiledDynamicRESTLayer`类,来初始化一个超图地图,并设置地图的一些基本属性。同时,我们注释掉了原本调用高德地图代码,以防止两个地图同时显示。 需要注意的是,在实际使用中,您需要根据您的具体情况,调整地图的服务地址、地图的中心点和缩放级别等属性。同时,您也需要在HTML中添加一个地图容器元素,例如: ```html <div id="map" style="height: 600px;"></div> ``` 这样,当您运行上述代码时,就可以在页面上看到一个使用超图地图地图实例了。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值