百度地圖繪製多邊形區域

小錢端發表於2020-10-21
地圖
百度地圖繪製多邊形區域

1.申請百度地圖ak；
2.完整程式碼如下：

<html> 
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">  
<head>  
<title>百度地圖繪製多邊形區域</title>  
</head>  
<body>  
<style type="text/css">  
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="你申請的ak值"></script>
<script type="text/javascript">  
let map;
let pointArray = [
    {lng:108.853025, lat:34.298633},
    {lng:108.85475, lat:34.318075},
    {lng:108.856475,lat:34.319744},
    {lng:108.857049, lat:34.331431},
    {lng:108.85245, lat:34.343354},
    {lng:108.852881, lat:34.351223},
    {lng:108.888095, lat:34.355872},
    {lng:108.925896, lat:34.366123},
    {lng:108.925896, lat:34.302808},
    {lng:108.901749, lat:34.300422},
    {lng:108.898012, lat:34.291714},
    {lng:108.877603, lat:34.291833},
    {lng:108.877603, lat:34.291834},
    {lng:108.861793, lat:34.296605}
]
function initialize() {  
    // 百度地圖API功能  
    map = new BMap.Map("map_canvas");  
    map.addControl(new BMap.NavigationControl());          // 新增平移縮放控制元件  
    map.addControl(new BMap.ScaleControl());               // 新增比例尺控制元件  
    map.addControl(new BMap.OverviewMapControl());         //新增縮略地圖控制元件  
    map.enableScrollWheelZoom();                           //啟用滾輪放大縮小  
    map.addControl(new BMap.MapTypeControl());             //新增地圖型別控制元件  
    // map.setMapType(BMAP_SATELLITE_MAP);  
    var point = new BMap.Point(108.896, 34.330);           // 建立點座標  
    map.centerAndZoom(point,13);                           // 初始化地圖,設定中心點座標和地圖級別。  
    var polygon1 = new BMap.Polygon(pointArray, {strokeColor:"green",fillColor:"#043233", strokeWeight:3, strokeOpacity:0,fillOpacity:0.4,strokeStyle:'dashed'});  
    map.addOverlay(polygon1); 
}  
</script>  
</head>  
<body onLoad="initialize()">  
  <div id="map_canvas" style="width: 100%; height: 100%;"></div>  
</body>  
</html>

相關文章