google map 两中方式绘制可编辑多边形并获取节点坐标信息

最新推荐文章于 2022-12-29 17:41:18 发布

studypower

最新推荐文章于 2022-12-29 17:41:18 发布

阅读量6.1k

点赞数 1

分类专栏： gis 文章标签： GIS 谷歌地图 map

本文链接：https://blog.csdn.net/work888study/article/details/15809829

版权

gis 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在制作谷歌地图下载器时碰到导入行政区边界shp 图绘制多边形与通过工具绘制多边形来确定下载范围，在这记录下多边形两种绘制方式。

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    <script>
	//初始化  
function initialize() {
    //初始化地图参数
  var mapOptions = {
  

    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
   //div显示地图
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
   //绘画工具 设置 
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
	//设置图形显示样式
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    },
	
	polygonOptions: {
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
	editable: true,
    }
  });
  drawingManager.setMap(map);
  drawingPolygon(map);
  //注册 多边形 绘制完成事件 
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
   var array= polygon.getPath().getArray();
   showLonLat(array);
});

//循环显示 经纬度
function showLonLat( arr){
	for(var i=0; i<arr.length;i++){
	alert(arr[i]);
	};
}

/*google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
    var radius = event.overlay.getRadius();
  }
});*/
}

//根据以知 点绘制图形
function drawingPolygon(map) {
  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];

  // Construct the polygon
  // Note that we don't specify an array or arrays, but instead just
  // a simple array of LatLngs in the paths property
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
	editable: true,
  });

  bermudaTriangle.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
	<div id="bottom"></div>
  </body>
</html>

studypower

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
google map 两中方式绘制可编辑多边形并获取节点坐标信息

在制作谷歌地图下载器时碰到导入行政区边界shp 图绘制多边形与通过工具绘制多边形来确定现在范围，在这记录下多边形两种绘制方式。 Drawing tools html, body, #map-canvas { height: 100%; margin: 0px; paddi
复制链接

扫一扫