hjg
2024-07-09 30304784e82d4bba24121328da8eb8490aec4f4f
提交 | 用户 | 时间
58d006 1 <!DOCTYPE html>
A 2 <html>
3 <head>
4   <meta charset="utf-8">
5   <title>GMaps.js &mdash; Geofences</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 path = [
20             [-12.040397656836609,-77.03373871559225],
21             [-12.040248585302038,-77.03993927003302],
22             [-12.050047116528843,-77.02448169303511],
23             [-12.044804866577001,-77.02154422636042]
24           ];
25
26       polygon = map.drawPolygon({
27         paths: path,
28         strokeColor: '#BBD8E9',
29         strokeOpacity: 1,
30         strokeWeight: 3,
31         fillColor: '#BBD8E9',
32         fillOpacity: 0.6
33       });
34       map.addMarker({
35         lat: -12.043333,
36         lng: -77.028333,
37         draggable: true,
38         fences: [polygon],
39         outside: function(m, f){
40           alert('This marker has been moved outside of its fence');
41         }
42       });
43     });
44   </script>
45 </head>
46 <body>
47   <h1>GMaps.js &mdash; Geofences</h1>
48   <div class="row">
49     <div class="span11">
50       <div id="map"></div>
51     </div>
52     <div class="span6">
53       <p>You can attach a geofence (which can be a polygon or a bounds) to a marker with:</p>
54       <pre>polygon = map.drawPolygon({
55   paths: path,
56   strokeColor: '#BBD8E9',
57   strokeOpacity: 1,
58   strokeWeight: 3,
59   fillColor: '#BBD8E9',
60   fillOpacity: 0.6
61 });
62 map.addMarker({
63   lat: -12.043333,
64   lng: -77.028333,
65   draggable: true,
66   fences: [polygon],
67   outside: function(marker, fence){
68     alert('This marker has been moved outside of its fence');
69   }
70 });</pre>
71       <p>You must define an <strong>outside</strong> callback, which will use this <code>marker</code> and its <code>fence</code>.</p>
72       <p><span class="label notice">Note: </span>You also can use <code>checkMarkerGeofence</code> or <code>checkGeofence</code> methods.</p>
73     </div>
74   </div>
75 </body>
76 </html>