<div class="codetitle"> <span><a style="CURSOR: pointer" data="99654" class="copybut" id="copybut99654" onclick="doCopy('code99654')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code99654"> <br> <br> <br> <br><title>Google 静态地图 API</title> <br><style type="text/css"> <BR>#divStaticMap span <BR>{ <BR>color:Gray; <BR>font-size:12px; <BR>} <BR>#divStaticMap .sel <BR>{ <BR>width:130px; <BR>} <BR></style> <br><script type="text/javascript"> <BR>function getObj(id) { <BR>return document.getElementById(id); <BR>} <br><br>function getStaticMap() { <BR>var url = 'http://maps.google.com/maps/api/staticmap?center='; <BR>if (getObj('chkUseNum').checked) { <BR>url += encodeURI(getObj('txtX').value) + ',' + encodeURI(getObj('txtY').value); <BR>} <BR>else { <BR>url += encodeURI(getObj('txtCenter').value); <BR>} <BR>url += '&zoom=' + getObj('txtZoom').value; <BR>url += '&size=' + getObj('txtWidth').value + 'x' + getObj('txtHeight').value; <BR>url += '&format=' + getObj('selImageType').options[getObj('selImageType').selectedIndex].text; <BR>url += '&maptype=' + getObj('selMapType').value; <BR>var trs = getObj('tdFlagList').getElementsByTagName('tr'); <BR>for (var i = 1; i < trs.length; i++) { <BR>var txtFlagAddress = trs[i].getElementsByTagName('input')[0]; <BR>if (txtFlagAddress.value == '') { <BR>continue; <BR>} <BR>var selFlagColor = trs[i].getElementsByTagName('select')[0]; <BR>var selFlagSize = trs[i].getElementsByTagName('select')[1]; <BR>var txtFlagLabel = trs[i].getElementsByTagName('input')[1]; <BR>url += '&markers=size:' + selFlagSize.value; <BR>url += '|color:' + selFlagColor.options[selFlagColor.selectedIndex].text; <BR>url += '|label:' + txtFlagLabel.value; <BR>url += '|' + encodeURI(txtFlagAddress.value); <BR>} <BR>url += '&sensor=false'; <br><br>getObj('txtImageUrl').value = url; <BR>getObj('imgMap').src = url; <BR>getObj('imgMap').style.display = 'block'; <BR>} <br><br>function addMapFlag(o) { <BR>var tr = o.parentNode.parentNode; <BR>var newTr = tr.parentNode.appendChild(tr.cloneNode(true)); <BR>var aList = newTr.getElementsByTagName('a'); <BR>aList[0].style.display = 'inline'; <BR>aList[1].style.display = 'none'; <BR>newTr.getElementsByTagName('input')[0].value = ''; <BR>return false; <BR>} <br><br>function delMapFlag(o) { <BR>var tr = o.parentNode.parentNode; <BR>tr.parentNode.removeChild(tr); <BR>tr = null; <BR>return false; <BR>} <br><br>function chkUseNum_onclick(o) { <BR>getObj('txtX').disabled = !o.checked; <BR>getObj('txtY').disabled = !o.checked; <BR>} <BR></script> <br> <br> <br><!-- <BR>参考文档:http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/ <BR>注意次API不需要key! <BR>通过设置IMG的SRC地址访问Google地址! <BR>http://maps.google.com/maps/api/staticmap?center=西安,钟楼&zoom=14&size=512x512&maptype=hybrid&sensor=false <BR>--> <br><div id="divStaticMap" style="font-size:14px;"> <br><table> <br><tr> <br><td style="vertical-align:top; padding-top:5px;">中心位置:</td> <br><td> <input id="txtCenter" type="text" value="西安,钟楼"><br> <br><input id="chkUseNum" type="checkbox" onclick="chkUseNum_onclick(this);"><label for="chkUseNum">使用经纬度:</label><br> <br><input id="txtX" type="text" value="0" disabled style="width:50px;"> X <br><input id="txtY" type="text" value="0" disabled style="width:50px;"> <br><span>(纬度-180~180 经度-90~90)</span> <br> </td> <br> </tr> <br><tr> <br><td>缩放等级:</td> <br><td> <input id="txtZoom" type="text" value="11" style="width:50px;"> <span>(0-21)</span> </td> <br> </tr> <br><tr> <br><td>图像大小:</td> <br><td> <input id="txtWidth" type="text" value="500" style="width:50px;"> X <br><input id="txtHeight" type="text" value="500" style="width:50px;"> <span>(640x640以内)</span> </td> <br> </tr> <br><tr> <br><td>图片格式:</td> <br><td><select id="selImageType" class="sel"> <br><option>jpg</option> <br><option>png</option> <br><option>png32</option> <br><option>gif</option> <br><option>jpg-baseline</option> <br></select></td> <br> </tr> <br><tr> <br><td>地图类型:</td> <br><td><select id="selMapType" class="sel"> <br><option value="roadmap">标准路线图</option> <br><option value="satellite">卫星图片</option> <br><option value="terrain">自然地形</option> <br><option value="hybrid">卫星和路线图</option> <br></select></td> <br> </tr> <br><tr> <br><td style="vertical-align:top; padding-top:5px;">地图标记:</td> <br><td id="tdFlagList"> <br><table style="border:solid 1px gray;"> <br><tr style="font-size:12px; color:Gray; background-color:#fef;"> <br><td>位置(地址或经纬度以|分割)</td> <br><td>标记(A-Z,0-9)</td> <br><td>颜色</td> <br><td>大小</td> <br><td>操作</td> <br> </tr> <br><tr> <br><td><input type="text" value="西安,钟楼"></td> <br><td> <input type="text" value="S" style="width:80px;"> <br> </td> <br><td><select> <br><option style="background-color:red;">red</option> <br><option style="background-color:black;">black</option> <br><option style="background-color:brown;">brown</option> <br><option style="background-color:green;">green</option> <br><option style="background-color:purple;">purple</option> <br><option style="background-color:yellow;">yellow</option> <br><option style="background-color:blue;">blue</option> <br><option style="background-color:gray;">gray</option> <br><option style="background-color:orange;">orange</option> <br><option style="background-color:white;">white</option> <br></select></td> <br><td><select> <br><option value="mid">中</option> <br><option value="small">小</option> <br><option value="tiny">极小</option> <br></select></td> <br><td> <br><a style="color:Red; font-size:12px; display:none;" href="#" onclick="delMapFlag(this);">删除</a> <br><a style="color:Blue; font-size:12px;" href="#" onclick="addMapFlag(this);">新增</a> </td> <br> </tr> <br> </table> <br> </td> <br> </tr> <br><tr> <br><td></td> <br><td> <input type="button" value="获 取" onclick="getStaticMap();"> <br> </td> <br> </tr> <br> </table> <br><hr> <br>图片地址:<input id="txtImageUrl" type="text" style="width:500px;"><br> <br><img id="imgMap" alt="" style="max-width:90%" src=""> <br> </div> <br><script type="text/javascript"> <BR>getStaticMap(); <BR></script> <br> <br> <br> </div> <br>演示代码:<a href="http://demo.jb51.net/js/googleStaticMap/index.html" target="_blank">http://demo.jb51.net/js/googleStaticMap/index.html</a>