google map 两中方式 绘制可编辑多边形 并获取节点坐标信息
2013-11-13 10:33
447 查看
在制作谷歌地图 下载器 时 碰到 导入行政区边界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>
相关文章推荐
- 百度地图实现鼠标绘制多边形并获取所有点坐标
- Google Map 根据坐标 获取地址信息
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
- 百度地图接口绘制任意多边形并获取每个点的经纬度
- 在PV3D中获取鼠标点击位置的空间坐标信息
- js获取节点和编辑的方法
- LDAP方式连接AD获取用户信息
- android自动化测试中hierarchyviewer和uiautomatorviewer获取控件信息的方式比对(2)
- easyui获取树实心节点数据方式
- 在网页中获取天气信息方式介绍
- 通过路径获取信息的几种方式
- Java获取异常的堆栈信息到String的方式
- 以WCF安全认证方式调用通用权限管理系统获取基础信息资料
- BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取
- iOS开发——定位获取经纬度坐标,并反编码获得地理位置信息(具体地址,国家、省、市等)
- 利用Google Map解析中国大陆4095个省市县的默认地理位置,获取地理坐标
- android自动化测试中hierarchyviewer和uiautomatorviewer获取控件信息的方式比对(2)
- 页面获取节点方式
- eclipse上hdfs的javaapi调用文件或者获取节点信息没有权限
- GPS获取坐标 显示Google map偏差计算