欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Google 靜態(tài)地圖API實現(xiàn)代碼

 更新時間：2010年11月19日 20:46:34   作者：  
Google 靜態(tài)地圖 文檔說的很詳細(xì)，這里就不在啰嗦了！
復(fù)制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<title>Google 靜態(tài)地圖 API</title>
<style type="text/css">
#divStaticMap span
{
color:Gray;
font-size:12px;
}
#divStaticMap .sel
{
width:130px;
}
</style>
<script type="text/javascript">
function getObj(id) {
return document.getElementById(id);
}

function getStaticMap() {
var url = 'http://maps.google.com/maps/api/staticmap?center=';
if (getObj('chkUseNum').checked) {
url += encodeURI(getObj('txtX').value) + ',' + encodeURI(getObj('txtY').value);
}
else {
url += encodeURI(getObj('txtCenter').value);
}
url += '&zoom=' + getObj('txtZoom').value;
url += '&size=' + getObj('txtWidth').value + 'x' + getObj('txtHeight').value;
url += '&format=' + getObj('selImageType').options[getObj('selImageType').selectedIndex].text;
url += '&maptype=' + getObj('selMapType').value;
var trs = getObj('tdFlagList').getElementsByTagName('tr');
for (var i = 1; i < trs.length; i++) {
var txtFlagAddress = trs[i].getElementsByTagName('input')[0];
if (txtFlagAddress.value == '') {
continue;
}
var selFlagColor = trs[i].getElementsByTagName('select')[0];
var selFlagSize = trs[i].getElementsByTagName('select')[1];
var txtFlagLabel = trs[i].getElementsByTagName('input')[1];
url += '&markers=size:' + selFlagSize.value;
url += '|color:' + selFlagColor.options[selFlagColor.selectedIndex].text;
url += '|label:' + txtFlagLabel.value;
url += '|' + encodeURI(txtFlagAddress.value);
}
url += '&sensor=false';

getObj('txtImageUrl').value = url;
getObj('imgMap').src = url;
getObj('imgMap').style.display = 'block';
}

function addMapFlag(o) {
var tr = o.parentNode.parentNode;
var newTr = tr.parentNode.appendChild(tr.cloneNode(true));
var aList = newTr.getElementsByTagName('a');
aList[0].style.display = 'inline';
aList[1].style.display = 'none';
newTr.getElementsByTagName('input')[0].value = '';
return false;
}

function delMapFlag(o) {
var tr = o.parentNode.parentNode;
tr.parentNode.removeChild(tr);
tr = null;
return false;
}

function chkUseNum_onclick(o) {
getObj('txtX').disabled = !o.checked;
getObj('txtY').disabled = !o.checked;
}
</script>
</head>
<body>
<!--
參考文檔：http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/
注意次API不需要key!
通過設(shè)置IMG的SRC地址訪問Google地址！
http://maps.google.com/maps/api/staticmap?center=西安,鐘樓&zoom=14&size=512x512&maptype=hybrid&sensor=false
-->
<div id="divStaticMap" style="font-size:14px;">
<table>
<tr>
<td style="vertical-align:top; padding-top:5px;">中心位置：</td>
<td><input id="txtCenter" type="text" value="西安,鐘樓" /><br />
<input id="chkUseNum" type="checkbox" onclick="chkUseNum_onclick(this);" /><label for="chkUseNum">使用經(jīng)緯度：</label><br />
<input id="txtX" type="text" value="0" disabled style="width:50px;" /> X
<input id="txtY" type="text" value="0" disabled style="width:50px;" />
<span>(緯度-180~180 經(jīng)度-90~90)</span>
</td>
</tr>
<tr>
<td>縮放等級：</td>
<td><input id="txtZoom" type="text" value="11" style="width:50px;" /> <span>(0-21)</span></td>
</tr>
<tr>
<td>圖像大?。?lt;/td>
<td><input id="txtWidth" type="text" value="500" style="width:50px;" /> X
<input id="txtHeight" type="text" value="500" style="width:50px;" /> <span>(640x640以內(nèi))</span></td>
</tr>
<tr>
<td>圖片格式：</td>
<td><select id="selImageType" class="sel">
<option>jpg</option>
<option>png</option>
<option>png32</option>
<option>gif</option>
<option>jpg-baseline</option>
</select></td>
</tr>
<tr>
<td>地圖類型：</td>
<td><select id="selMapType" class="sel">
<option value="roadmap">標(biāo)準(zhǔn)路線圖</option>
<option value="satellite">衛(wèi)星圖片</option>
<option value="terrain">自然地形</option>
<option value="hybrid">衛(wèi)星和路線圖</option>
</select></td>
</tr>
<tr>
<td style="vertical-align:top; padding-top:5px;">地圖標(biāo)記：</td>
<td id="tdFlagList">
<table style="border:solid 1px gray;">
<tr style="font-size:12px; color:Gray; background-color:#fef;">
<td>位置(地址或經(jīng)緯度以|分割)</td>
<td>標(biāo)記(A-Z,0-9)</td>
<td>顏色</td>
<td>大小</td>
<td>操作</td>
</tr>
<tr>
<td><input type="text" value="西安,鐘樓" /></td>
<td><input type="text" value="S" style="width:80px;" />
</td>
<td><select>
<option style="background-color:red;">red</option>
<option style="background-color:black;">black</option>
<option style="background-color:brown;">brown</option>
<option style="background-color:green;">green</option>
<option style="background-color:purple;">purple</option>
<option style="background-color:yellow;">yellow</option>
<option style="background-color:blue;">blue</option>
<option style="background-color:gray;">gray</option>
<option style="background-color:orange;">orange</option>
<option style="background-color:white;">white</option>
</select></td>
<td><select>
<option value="mid">中</option>
<option value="small">小</option>
<option value="tiny">極小</option>
</select></td>
<td>
<a style="color:Red; font-size:12px; display:none;" href="#" onclick="delMapFlag(this);">刪除</a>
<a style="color:Blue; font-size:12px;" href="#" onclick="addMapFlag(this);">新增</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="獲 取" onclick="getStaticMap();" />
</td>
</tr>
</table>
<hr />
圖片地址：<input id="txtImageUrl" type="text" style="width:500px;" /><br />
<img id="imgMap" alt="" style="border:solid 2px gray; margin:10px 0px; display:none;" src="" />
</div>
<script type="text/javascript">
getStaticMap();
</script>
</body>
</html>

演示代碼:http://demo.jb51.net/js/googleStaticMap/index.html

相關(guān)文章

  • List Information About the Binary Files Used by an Application

    List Information About the Binary Files Used by an Applicati

    List Information About the Binary Files Used by an Application...
    2007-06-06

    • 最新評論