Google 静态地图API实现代码


Posted in Javascript onNovember 19, 2010
<!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.3water.com/js/googleStaticMap/index.html
Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 #Javascript
JS运行耗时操作的延时显示方法
Nov 19 #Javascript
function foo的原型与prototype属性解惑
Nov 19 #Javascript
高亮显示web页表格行的javascript代码
Nov 19 #Javascript
javascript tips提示框组件实现代码
Nov 19 #Javascript
突发奇想的一个jquery插件
Nov 19 #Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 #Javascript
You might like
PHP的历史和优缺点
2006/10/09 PHP
php4的彩蛋
2006/10/09 PHP
PHP 翻页 实例代码
2009/08/07 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
php中错误处理操作实例分析
2019/08/23 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
详解python单例模式与metaclass
2016/01/15 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
11月升旗仪式讲话稿
2014/02/15 职场文书
爱心捐书活动总结
2014/07/05 职场文书
转让协议书范本
2014/09/13 职场文书
公证委托书格式
2014/09/13 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
JavaScript实现队列结构过程
2021/12/06 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏