google地图静态api使用助手（html源码）

<!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" οnclick="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="#" οnclick="delMapFlag(this);">
删除
</a>
<a style="color:Blue; font-size:12px;" href="#" οnclick="addMapFlag(this);">
新增
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="获 取" οnclick="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>

另附有百度地图API-静态地图生成助手地址：
http://api.map.baidu.com/lbsapi/staticmap/staticmap-helper.html

google地图静态api使用助手（html源码）相关推荐

google地图静态下载和js调用
google地图静态下载和js调用 google staticmap使用 google地图js调用 google地图静态下载 1)注册google帐号 2)开启google static map功能 ...
伪原创智能改写api百度【php源码】
用百度自家的产品来生成的文章,原创度和收录相当理想,伪原创智能改写api百度,以毒攻毒. 从全球趋势来看,信息化.智能化.智能化是建设智慧城市的必由之路.2022年,德勤发布<超级智慧城市报告& ...
【数学建模】基于matlab武汉地铁2号线路线地图动态模拟【含Matlab源码 1092期】
一.获取代码方式获取代码方式1: 完整代码已上传我的资源:[数学建模]基于matlab武汉地铁2号线路线地图动态模拟[含Matlab源码 1092期] 点击上面蓝色字体,直接付费下载,即可. 获取代 ...
SixTool多功能多合一代挂助手系统源码
☑️ 编号:ym369 ☑️ 品牌:无 ☑️ 语言:php ☑️ 大小:5.2MB ☑️ 类型:代挂助手系统源码 ☑️ 支持:pc+wap
抖音小程序基础之目前提供哪些API（教程含源码）
抖音小程序基础之目前提供哪些API(教程含源码) 小程序开发框架提供丰富的字节跳动宿主原生 API,可以方便的调起字节跳动宿主提供的能力,如获取系统信息等.详细介绍请参考 API 文档. 通 ...
2023最新iApp画质助手安卓源码+功能还是挺多的
正文: 2023最新iApp画质助手安卓源码+功能还是挺多的,有兴趣的自行去研究体验吧,其它就没什么好介绍的了. 程序: wwjsxs.lanzouq.com/iR4CK0rekhih 图片:
【Matlab路径规划】蚁群算法求解机器人栅格地图最短路径规划问题【含源码 1580期】
一.代码运行视频(哔哩哔哩) [Matlab路径规划]蚁群算法求解机器人栅格地图最短路径规划问题[含源码 1580期] 二.matlab版本及参考文献 1 matlab版本 2014a 2 参考文献 ...
Android 高德地图API（详细步骤+源码）
高德地图API使用详解前言正文一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
arcgis api 3.x for js 入门开发系列五地图态势标绘（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
Java程序员从笨鸟到菜鸟之（五十二）细谈Hibernate（三）Hibernate常用API详解及源码分析--csdn 曹胜欢...
新接触一个框架的目的就是想利用这个框架来为我们做一些工作,或者是让他来简化我们的工作,利用这个框架无非就是要利用这个框架所给我们提供的API去操作我们的数据,所以利用一个框架的好坏很大一部分取决于你对 ...

google地图静态api使用助手（html源码）

google地图静态api使用助手（html源码）相关推荐

最新文章

热门文章