<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><!DOCTYPE html> <br><html> <br><머리> <br><title>Google 静态地图 API</title> <br><style type="text/css"> <br>#divStaticMap 범위 <br>{ <br>color:Gray; <br>글꼴 크기:12px; <br>} <br>#divStaticMap .sel <br>{ <br>너비: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>계속; <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 = '|라벨:' 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 = '차단'; <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 = '인라인'; <BR>aList[1].style.display = '없음'; <BR>newTr.getElementsByTagName('input')[0].value = ''; <BR>거짓을 반환합니다. <BR>} <br><br>function delMapFlag(o) { <BR>var tr = o.parentNode.parentNode; <BR>tr.parentNode.removeChild(tr); <BR>tr = null; <BR>거짓을 반환합니다. <BR>} <br><br>function chkUseNum_onclick(o) { <BR>getObj('txtX').disabled = !o.checked; <BR>getObj('txtY').disabled = !o.checked; <BR>} <BR></script> <br></head> <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; 글꼴 크기:12px;" href="#" onclick="addMapFlag(this);">신규</a></td> <br></tr> <br></테이블> <br></td> <br></tr> <br><tr> <br><td></td> <br><td><input type="button" value="获取" onclick="getStaticMap();" /> <br></td> <br></tr> <br></테이블> <br><시간 /> <br>图文地址：<input id="txtImageUrl" type="text" style="width:500px;" /><br /> <br><img id="imgMap" alt="" style="border:solid 2px grey; margin:10px 0px; display:none;" src="" /> <br></div> <br><script type="text/javascript"> <br>getStaticMap(); <br></script> <br></body> <br></html> <br> </div> <br>演示代码:<a href="http://demo.jb51.net/js/googleStaticMap/index.html" target="_blank">http://demo.jb51.net/js/googleStaticMap/index.html</a>
