高德地图 JS API示例-简易行政区图- › 简易行政区图-外国

<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style type="text/css">
      html,body,.map{
        width: 100%;
        height: 100%;
        margin: 0px;
      }
    </style>
    <title>高德简易行政区地图</title>
  </head>
  <body>
    <div id="container" class="map" tabindex="0"></div>
    <div class="input-card">
    <h4>选择国家</h4>
    <select name="country-list" style="height: 28px;margin-right: 10px;" onchange="changeSOC(this.value)">
        <option value="RUS" selected>俄罗斯</option>
        <option value="USA">美国</option>
        <option value="JPN">日本</option>
    </select>
</div>
<script language="javascript" 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">

var getColorByRandom = function(){
    var rg = Math.random() * 155 + 50;
    return 'rgb(' + rg + ',' + rg + ',255)';
}

var disCountry = new AMap.DistrictLayer.Country({
    zIndex:10,
    SOC:'RUS',
    depth:1,
    styles:{
        'nation-stroke':'#22ffff',
        'coastline-stroke':[0.85, 0.63, 0.94, 1],
        'province-stroke':'white',
        'fill':function(props){
           return getColorByRandom()
        }
    }
})


var map = new AMap.Map("container",{
        zooms: [3, 10],
        center:[93.729504,68.718195],
        showIndoorMap:false,
        zoom: 3,
        isHotspot:false,
        defaultCursor:'pointer',
        touchZoomCenter:1,
        pitch: 0,
        layers:[
            disCountry,
            new AMap.TileLayer()
        ],
        viewMode:'3D',
        resizeEnable: true
})
map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar({liteStyle:true,offset:new AMap.Pixel(10,180)}));
document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2019)6379号、GS(2019)756号'
var centers = {
    'RUS': [93.729504,68.718195],
    'USA': [-113.877655,52.652266],
    'JPN': [136.824904,38.00712]
}
var changeSOC = function(soc){
    disCountry.setSOC(soc);
    map.setCenter(centers[soc])
}

</script>
  </body>
  
</html>

0 0 投票数

文章评分