最近发现谷歌地图http://www.google.cn/maps 左下角点击卫星图像的时候,不能切换到卫星地图模式,于是借助Google地图API方式写了个DEMO,算是学习了下Google地图,代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=zh-cn"></script>
<script type="text/javascript">
window.onload = function() {
var geo = new geoEach();
// 解析地名到经纬度
var area = '中国\n南京';
area = area.split('\n');
var sh;
var i = 0;
//
sh = window.setInterval(function() {
if (i < area.length) {
geo.toLatLng(area[i]);
} else {
window.clearInterval(sh);
}
i++;
}, 500);//每隔500毫秒解析地名直至到最小地名后关闭定时器
}
function geoEach() {
// 初始化地图
geoEach.map = new google.maps.Map(document.getElementById("map_canvas"), {
center : new google.maps.LatLng(35.86166, 104.19539699999996),
zoom : 4,
mapTypeId : google.maps.MapTypeId.HYBRID
});
// 添加一个marker
geoEach.marker = new google.maps.Marker({
map : geoEach.map,
position : new google.maps.LatLng(35.86166, 104.19539699999996)
});
// 实例化geocoder服务
geoEach.geocoder = new google.maps.Geocoder();
}
geoEach.address = null;// 需要解析的地名
geoEach.prototype = {
// 解析地名
toLatLng : function(address) {
// 接收
geoEach.address = address;
// 执行geocoder解析地名
geoEach.geocoder.geocode({
// 传入地名
'address' : geoEach.address
}, function(results, status) {
// create div
var newElement = window.document.createElement('p');
if (status == google.maps.GeocoderStatus.OK) {
// 获取解析后的经纬度
var location = results[0].geometry.location;
// 切换地图位置
geoEach.map.setCenter(location);
geoEach.marker.setPosition(location);
var latLng = location.toString().substr(1,location.toString().indexOf(')') - 1);
// insert innerHTML
newElement.innerHTML = geoEach.address + ":" + latLng;
} else {
// insert error innerHTML
newElement.innerHTML = geoEach.address + ":error" + status;
}
});
}
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 580px"></div>
</body>
</html>
效果图如下: