Google Map标注多个地点，并且设置在最佳视野内
程序员文章站
2022-03-17 16:19:15
...
<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 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 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>
上一篇： Go标准容器之Ring的使用说明