Google Map标注多个地点，并且设置在最佳视野内 -

osacar

浏览: 212414 次
性别:
来自: 深圳

最近访客更多访客>>

consy

rui_gao

jixianzilang

风间琉璃a

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Google Map标注多个地点，并且设置在最佳视野内

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Google 地图 JavaScript API 示例: 简单的地图</title>
	<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:100%}
</style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


    <script type="text/javascript">
var map = null;
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: new google.maps.LatLng(25.036772,121.520269), // 設定地圖中心點
            mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID,ROADMAP,SATELLITE,TERRAIN   
        });		
		
	addSite(map,'中山',25.062361,121.526194,'台北市中山區林森北路511號');
	addSite(map,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號');
	addSite(map,'莒光',25.050000,121.420556,'台北市萬華區莒光路315號');
	addSite(map,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號');		
}


  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

	  
var prev_infowindow = null;
function addSite(map, siteDesc, lat, lng, address) {
	var pt = new google.maps.LatLng(lat,lng);
	var marker = new google.maps.Marker({
                map: map,
                position : pt, 
                title: siteDesc
                });
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
        if (prev_infowindow != null) prev_infowindow.close();
        prev_infowindow = infowindow;
        infowindow.open(map, marker);
    });		


var LatLngList = new Array (new google.maps.LatLng (25.062361,121.526194), new google.maps.LatLng (25.030000,121.490556), new google.maps.LatLng (25.050000,121.420556),new google.maps.LatLng (25.020833,121.528611));
//  Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
//  Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
  //  And increase the bounds to take this point
  bounds.extend (LatLngList[i]);
}
//  Fit these bounds to the map
map.fitBounds (bounds);
	
}

$(document).ready(function() { initialize(); });


    </script>
	

  </head>
  <body onload="initialize()"  >
    <div id="map" ></div>
  </body>
</html>

分享到：