查看 | 历史 | 提交 | 提交对比
hjg
2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0
提交 | 用户 | 时间
58d006 1 <!DOCTYPE html>
A 2 <html>
3 <head>
4   <meta charset="utf-8">
5   <title>GMaps.js &mdash; Geocoding</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       $('#geocoding_form').submit(function(e){
20         e.preventDefault();
21         GMaps.geocode({
22           address: $('#address').val().trim(),
23           callback: function(results, status){
24             if(status=='OK'){
25               var latlng = results[0].geometry.location;
26               map.setCenter(latlng.lat(), latlng.lng());
27               map.addMarker({
28                 lat: latlng.lat(),
29                 lng: latlng.lng()
30               });
31             }
32           }
33         });
34       });
35     });
36   </script>
37 </head>
38 <body>
39   <h1>GMaps.js &mdash; Geocoding</h1>
40   <div class="row">
41     <div class="span11">
42       <form method="post" id="geocoding_form">
43         <label for="address">Address:</label>
44         <div class="input">
45           <input type="text" id="address" name="address" />
46           <input type="submit" class="btn" value="Search" />
47         </div>
48       </form>
49       <div id="map"></div>
50     </div>
51     <div class="span6">
52       <p>You can geocoding this way:</p>
53       <pre>GMaps.geocode({
54   address: $('#address').val(),
55   callback: function(results, status){
56     if(status=='OK'){
57       var latlng = results[0].geometry.location;
58       map.setCenter(latlng.lat(), latlng.lng());
59       map.addMarker({
60         lat: latlng.lat(),
61         lng: latlng.lng()
62       });
63     }
64   }
65 });</pre>
66       <p>You can define either <code>address</code> or <code>lat</code> and <code>lng</code>. Also, you must define <code>callback</code>, which will use <code>results</code> of geocoding and <code>status</code>.</p>
67     </div>
68   </div>
69 </body>
70 </html>