您的位置：首页 > 编程语言 > Go语言

Google Map的简单应用

2010-07-01 00:08 225 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></mce:script>
<mce:script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAFupbYOU_L-r30uYKg3qzFRREtn3Buo7DbWQ1CwQ86CcVlui-zxSRPf1vc-KLWAiBPMRsL4snQhrQ-Q" mce_src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAFupbYOU_L-r30uYKg3qzFRREtn3Buo7DbWQ1CwQ86CcVlui-zxSRPf1vc-KLWAiBPMRsL4snQhrQ-Q" type="text/javascript"></mce:script>

<mce:script type="text/javascript"><!--
var map;
var geo = new GClientGeocoder();
var gpol=new GPolyline();
var gdir=new GDirections();
var addressMarker=new Array();
var addressInfo=new Array();

var countryZoom = 4;
var provinceZoom = 7;
var cityZoom = 15;
var addrZoom = 17;
function showMap(locationName, zoom) {
map = new GMap2(document.getElementById("oppoMap"));
gdir=new GDirections(map,null);

if (GBrowserIsCompatible()) {
geo.getLatLng(locationName, function(point) {
if(point != null) {
map.setCenter(point, zoom);
var customUI = map.getDefaultUI();
customUI.maptypes.hybrid = false;
customUI.maptypes.satellite = true;
customUI.maptypes.physical = false;
map.setUI(customUI);

for(var i = 0; i < addressInfo.length; i++) {
var point = addressInfo[i].coordinate.split(",");
var marker = CreateMarker(point[0], point[1], i);
addressMarker.push(marker);
map.addOverlay(marker);
}
}
});
}
}

function changeProvince() {
var pVal = $('#province').val().split("_");
var place = pVal[1];
var zoom = provinceZoom;
$('#city').html("");
$('#city').append("<option value=-1_请选择>请选择</option>");
if(place == "广东") {
$('#city').append("<option value=1_广州天河路>广州天河区</option>");
$('#city').append("<option value=2_广州海珠区>广州海珠区</option>");
$('#city').append("<option value=3_广州番禺区>广州番禺区</option>");
$('#city').append("<option value=4_广州白云区>广州白云区</option>");
}
if (pVal[0] < 0) {
place = '中国';
zoom = countryZoom;
}
showMap(place, zoom);
}

function changeCity() {
var cVal = $('#city').val().split("_");
var pVal = $('#province').val().split("_");
var place = pVal[1];
var zoom = cityZoom;
var showPlace;
if (cVal[0] < 0) {
place = pVal[1];
showPlace = place;
zoom = provinceZoom;
} else {
showPlace = pVal[1] + place;
}
showMap(showPlace, zoom);
}

// --></mce:script>
</head>
<body onload="changeProvince();">
<div id="type_box">
请选择您所在的省份：
<SELECT class=select id=province style="WIDTH: 100px" name=""  onChange="changeProvince();">
<OPTION value=-1_请选择>请选择</OPTION>
<OPTION value=5_广东>广东</OPTION>
</select>

<SELECT class=select id=city style="WIDTH: 100px" name=""  onChange="changeCity();">
<OPTION value=-1_请选择>请选择</OPTION>
</select>

</div>

<div id="oppoMap" style="margin:10px;width:auto;height:600px;">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航