Google 靜態(tài)地圖API實(shí)現(xiàn)代碼
更新時(shí)間：2010年11月19日 20:46:34 作者：
Google 靜態(tài)地圖 文檔說(shuō)的很詳細(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!
通過(guò)設(shè)置IMG的SRC地址訪問(wèn)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>縮放等級(jí)：</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)文章
JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級(jí)錯(cuò)誤問(wèn)題
這篇文章主要介紹了JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級(jí)錯(cuò)誤問(wèn)題做個(gè)筆錄，以防出現(xiàn)類似錯(cuò)誤,需要的朋友可以參考下2016-08-08
javascript實(shí)現(xiàn)點(diǎn)擊圖片切換
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細(xì)介紹了基于bootstrap風(fēng)格的彈框插件，適用于確認(rèn)框、提示框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
去除數(shù)組重復(fù)值的方法有很多，本文整理了四種不同方式，在此與大家分享下，希望對(duì)大家有所幫助2013-09-09
javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng)（改變寬高、透明度、位置）
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng)，比如改變寬高、透明度、位置等，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript模擬實(shí)現(xiàn)鍵盤(pán)打字效果
這篇文章主要介紹了JavaScript模擬實(shí)現(xiàn)鍵盤(pán)打字效果,本文直接給出實(shí)例代碼,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JS中閉包的經(jīng)典用法,結(jié)合2則示例分析了JS閉包的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
javascript簡(jiǎn)單實(shí)現(xiàn)深淺拷貝過(guò)程詳解
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)深淺拷貝過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
在頁(yè)面開(kāi)發(fā)時(shí)我們少不了各種鼠標(biāo)交互動(dòng)作，那么JavaScript中如何實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-05-05
javascript通過(guò)navigator.userAgent識(shí)別各種瀏覽器
識(shí)別各種瀏覽器的實(shí)現(xiàn)原理是根據(jù)navigator.userAgent返回值識(shí)別，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10