本來也沒想到要學習下google map，由于項目需要，是以簡單學習了下google map。
首先要加載google maps api，不然一切無從談起，
<script type="text/javascript" src="http://maps/api/js?sensor=false"></script>
必須要設定 sensor 參數，以指明此應用程式是否使用傳感器确定使用者的位置。
然後編寫地圖函數，在進行加載。
simple map：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(30.33,120.23);
var myOption = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), myOption);
}
</script>
</head>
<body onload="initialize()">
<div id="myMap" style="width:600px;height:400px"></div>
</body>
</html>
也可以通過js事件加載：google.maps.event.addDomListener(window, 'load', initialize);
latlng對象是經緯度，mapTypeId有多種，具體google的挨批中有，一般主要使用ROADMAP。map就是地圖對象，zoom參數指定顯示地圖的詳細程度。
還可以為地圖添加标記，資訊視窗，事件等。
simple marker map：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.3, 120.2);
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var markerOption = {
position:latlng,
map:map,
title:"good"
}
var marker = new google.maps.Marker(markerOption);
google.maps.event.addListener(marker, 'click', function() {
if(map.getZoom() == 15) {
map.setZoom(10);
}else {
map.setZoom(15);
}
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position:position,
map:map
});
map.panTo(position);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
此代碼可以在地圖上任意添加marker。
simple window info map：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(30.33,120.23);
var myOption = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), myOption);
marker = new google.maps.Marker({
position:latlng,
map:map
});
var content = "good";
infowindow = new google.maps.InfoWindow({
content:content,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function hide() {
var cmd = document.getElementById("show").value;
if(cmd == "hide") {
infowindow.close();
document.getElementById("show").value = "show";
}else {
infowindow.open(map, marker);
document.getElementById("show").value = "hide";
}
}
</script>
</head>
<body onload="initialize()">
<div id="myMap" style="width:600px;height:400px"></div>
<div><input type="button" onclick="hide()" value="show" id="show"/></div>
</body>
</html>
此代碼點選按鈕可以顯示marker上邊的info window，也可以隐藏。
标記也可以通過自定義。
其實對于google map的學習，google maps api中已經提供相當的例子，可以通過解讀源代碼來學習。
[url]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/[/url]
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)