管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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.glzy8.com/js/googleStaticMap/index.html

教程首页 更多教程