百度地图绘制多边形区域

最新推荐文章于 2024-05-22 21:54:15 发布

小钱端

最新推荐文章于 2024-05-22 21:54:15 发布

阅读量2.7k

点赞数 1

分类专栏： javascript 文章标签：百度 js 数据可视化 javascript html5

本文链接：https://blog.csdn.net/m0_37929303/article/details/109195813

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

百度地图绘制多边形区域

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>

小钱端

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图绘制多边形区域

百度地图绘制多边形区域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, htm
复制链接

扫一扫