Google 静态地图API实现代码

复制代码代码如下:
<！DOCTYPE html>
<html>
<head>
<title>Google 静态地图 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！
通过设置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">使用经纬度：</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 经度-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>图像大小：</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以内）</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">标准路线图</option>
<option value="satellite">卫星图片</option>
<option value="terrain">自然地形</option>
<option value="hybrid">卫星和路线图</option>
</select></td>
</tr>
<tr>
<td style="vertical-align:top; padding-top:5px;">地图标记：</td>
<td id="tdFlagList">
<table style="border:solid 1px gray;">
<tr style="font-size:12px; color:Gray; background-color:#fef;">
<td>位置（地址或经纬度以|分割）</td>
<td>标记（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