| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | <!DOCTYPE html> |
| A | 2 | <html> |
| 3 | <head> | |
| 4 | <meta charset="utf-8"> | |
| 5 | <title>GMaps.js — Geometry overlays</title> | |
| 6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> | |
| 7 | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> | |
| 8 | <script type="text/javascript" src="../gmaps.js"></script> | |
| 9 | <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> | |
| 10 | <link rel="stylesheet" type="text/css" href="examples.css" /> | |
| 11 | <script type="text/javascript"> | |
| 12 | var map; | |
| 13 | $(document).ready(function(){ | |
| 14 | map = new GMaps({ | |
| 15 | el: '#map', | |
| 16 | lat: -12.043333, | |
| 17 | lng: -77.028333 | |
| 18 | }); | |
| 19 | var bounds = [[-12.030397656836609,-77.02373871559225],[-12.034804866577001,-77.01154422636042]]; | |
| 20 | rectangle = map.drawRectangle({ | |
| 21 | bounds: bounds, | |
| 22 | strokeColor: '#BBD8E9', | |
| 23 | strokeOpacity: 1, | |
| 24 | strokeWeight: 3, | |
| 25 | fillColor: '#BBD8E9', | |
| 26 | fillOpacity: 0.6 | |
| 27 | }); | |
| 28 | ||
| 29 | var paths = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]]; | |
| 30 | polygon = map.drawPolygon({ | |
| 31 | paths: paths, | |
| 32 | strokeColor: '#25D359', | |
| 33 | strokeOpacity: 1, | |
| 34 | strokeWeight: 3, | |
| 35 | fillColor: '#25D359', | |
| 36 | fillOpacity: 0.6 | |
| 37 | }); | |
| 38 | lat = -12.040504866577001; | |
| 39 | lng = -77.02024422636042; | |
| 40 | circle = map.drawCircle({ | |
| 41 | lat: lat, | |
| 42 | lng: lng, | |
| 43 | radius: 350, | |
| 44 | strokeColor: '#432070', | |
| 45 | strokeOpacity: 1, | |
| 46 | strokeWeight: 3, | |
| 47 | fillColor: '#432070', | |
| 48 | fillOpacity: 0.6 | |
| 49 | }); | |
| 50 | for(i in paths){ | |
| 51 | bounds.push(paths[i]); | |
| 52 | } | |
| 53 | b = []; | |
| 54 | for(i in bounds){ | |
| 55 | latlng = new google.maps.LatLng(bounds[i][0], bounds[i][1]); | |
| 56 | b.push(latlng); | |
| 57 | } | |
| 58 | for(i in paths){ | |
| 59 | latlng = new google.maps.LatLng(paths[i][0], paths[i][1]); | |
| 60 | b.push(latlng); | |
| 61 | } | |
| 62 | map.fitLatLngBounds(b); | |
| 63 | }); | |
| 64 | </script> | |
| 65 | </head> | |
| 66 | <body> | |
| 67 | <h1>GMaps.js — Geometry overlays</h1> | |
| 68 | <div class="row"> | |
| 69 | <div class="span11"> | |
| 70 | <div id="map"></div> | |
| 71 | </div> | |
| 72 | <div class="span6"> | |
| 73 | <p>You can draw geometry overlays (which can be a polygon or a rectangle or a circle):</p> | |
| 74 | <pre>polygon = map.drawRectangle({ | |
| 75 | bounds: bounds, | |
| 76 | strokeColor: '#BBD8E9', | |
| 77 | strokeOpacity: 1, | |
| 78 | strokeWeight: 3, | |
| 79 | fillColor: '#BBD8E9', | |
| 80 | fillOpacity: 0.6 | |
| 81 | }); | |
| 82 | polygon = map.drawPolygon({ | |
| 83 | paths: paths, | |
| 84 | strokeColor: '#25D359', | |
| 85 | strokeOpacity: 1, | |
| 86 | strokeWeight: 3, | |
| 87 | fillColor: '#25D359', | |
| 88 | fillOpacity: 0.6 | |
| 89 | }); | |
| 90 | circle = map.drawCircle({ | |
| 91 | lat: lat, | |
| 92 | lng: lng, | |
| 93 | radius: 350, //350 meters | |
| 94 | strokeColor: '#432070', | |
| 95 | strokeOpacity: 1, | |
| 96 | strokeWeight: 3, | |
| 97 | fillColor: '#432070', | |
| 98 | fillOpacity: 0.6 | |
| 99 | });</pre> | |
| 100 | <p>Be careful with the settings as they are not the same for each overlay.</p> | |
| 101 | </div> | |
| 102 | </div> | |
| 103 | </body> | |
| 104 | </html> | |
