Google 静态地图API实现代码

网络编程 2024/11/16 佚名

3 2 1

复制代码代码如下:
<!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 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="/UploadFiles/2021-04-02/"></div>
<script type="text/javascript">
getStaticMap();
</script>
</body>
</html>

演示代码:http://demo.jb51.net/js/googleStaticMap/index.html

静态地图

标签：

静态地图

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“Google 静态地图API实现代码”

Google 静态地图API实现代码

暂无“Google 静态地图API实现代码”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

Google 静态地图API实现代码

静态地图

一个很简单的无限分类树实现代码

Javascript中的转义用法实例代码

评论“Google 静态地图API实现代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

Google 静态地图API实现代码

静态地图

一个很简单的无限分类树实现代码

Javascript中的转义用法实例代码

评论“Google 静态地图API实现代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存