google api 画圆

最新推荐文章于 2015-05-27 00:47:42 发布

穷开心0902

最新推荐文章于 2015-05-27 00:47:42 发布

阅读量843

点赞数

 <!DOCTYPE html>
 

 <html>
 

   <head>
 

     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 

     <title>Circle Overlay</title>
 

     <style type="text/css">
 

       #map {
 

         width: 800px;
 

         height: 500px;
 

}

     </style>
 

     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 

     <script type="text/javascript">
 

/**

        * Called on the initial page load.
 

*/

       function init() {
 

         var mapCenter =  new google.maps.LatLng(0, 0);
 

         var map =  new google.maps.Map(document.getElementById('map'), {
 

           'zoom': 1,
 

           'center': mapCenter,
 

           'mapTypeId': google.maps.MapTypeId.ROADMAP
 

});

         // Create a draggable marker which will later on be binded to a
 

         // Circle overlay.
 

         var marker =  new google.maps.Marker({
 

           map: map,
 

           position: new google.maps.LatLng(55, 0),
 

           draggable: true,
 

           title: 'Drag me!'
 

});

         // Add a Circle overlay to the map.
 

         var circle =  new google.maps.Circle({
 

           map: map,
 

           radius: 3000000 // 3000 km
 

});

         // Since Circle and Marker both extend MVCObject, you can bind them
 

         // together using MVCObject's bindTo() method.  Here, we're binding
 

         // the Circle's center to the Marker's position.
 

         // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
 

         circle.bindTo('center', marker, 'position');
 

}

       // Register an event listener to fire when the page finishes loading.
 

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

     </script>
 

   </head>
 

   <body>
 

     <h1>Drag the marker to move the circle</h1>
 

     <div id="map"></div>
 

   </body>
 

 </html>

关注