Google 静态地图API实现代码

日期：2020-06-12 栏目：程序人生浏览：次

<!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>

<div>
<table>
<tr>
<td>中心位置：</td>
<td><input type="text" value="西安,钟楼" /><br />
<input type="checkbox" /><label for="chkUseNum">使用经纬度：</label><br />
<input type="text" value="0" disabled /> X
<input type="text" value="0" disabled />
<span>(纬度-180~180 经度-90~90)</span>
</td>
</tr>
<tr>
<td>缩放等级：</td>
<td><input type="text" value="11" /> <span>(0-21)</span></td>
</tr>
<tr>
<td>图像大小：</td>
<td><input type="text" value="500" /> X
<input type="text" value="500" /> <span>(640x640以内)</span></td>
</tr>
<tr>
<td>图片格式：</td>
<td><select>
<option>jpg</option>
<option>png</option>
<option>png32</option>
<option>gif</option>
<option>jpg-baseline</option>
</select></td>
</tr>
<tr>
<td>地图类型：</td>
<td><select>
<option value="roadmap">标准路线图</option>
<option value="satellite">卫星图片</option>
<option value="terrain">自然地形</option>
<option value="hybrid">卫星和路线图</option>
</select></td>
</tr>
<tr>
<td>地图标记：</td>
<td>
<table>
<tr>
<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" />
</td>
<td><select>
<option>red</option>
<option>black</option>
<option>brown</option>
<option>green</option>
<option>purple</option>
<option>yellow</option>
<option>blue</option>
<option>gray</option>
<option>orange</option>
<option>white</option>
</select></td>
<td><select>
<option value="mid">中</option>
<option value="small">小</option>
<option value="tiny">极小</option>
</select></td>
<td>
<a href="#">删除</a>
<a href="#">新增</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="获取" />
</td>
</tr>
</table>
<hr />
图片地址：<input type="text" /><br />
<img alt="" src="" />
</div>
<script type="text/javascript">
getStaticMap();
</script>
</body>
</html>

转载注明出处：https://www.heiqu.com/wdfpfs.html

Google 静态地图API实现代码

相关推荐