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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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加密解密的代码
2007/07/16 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
js模拟类继承小例子
2010/07/17 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python