<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> <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>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>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 = '&marks=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 = 'ブロック'; <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 = 'none'; <br>newTr.getElementsByTagName('input')[0].value = ''; <br> false を返します。 <br>} <br><br>function delMapFlag(o) { <br>var tr = o.parentNode.parentNode; <br>tr.parentNode.removeChild(tr); <br>tr = null; <br> false を返します。 <br>} <br><br>関数 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 キーは必要ありません! <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="border:solid 2px grey; margin:10px 0px; display:none;" src="" />; <br> <br><script type="text/javascript"> <br>getStaticMap(); <br></script> <br></body> <br></html> <br><br>演示代:<a href="http://demo.jb51.net/js/googleStaticMap/index.html" target="_blank">http://demo.jb51.net/js/googleStaticMap/index.html</a> </tr></trs.length> </div>
