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模板技术
Apr 27 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
jquery ui对话框实例代码
May 10 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
javascript的几种写法总结
Sep 30 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
javascript实现放大镜功能
Dec 09 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下MYSQL limit的优化
2008/01/10 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python笔试面试题小结
2019/09/07 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
装潢设计专业推荐信模板
2013/11/26 职场文书
大学生志愿者感言
2014/01/15 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
《颐和园》教学反思
2016/02/19 职场文书
2019年亲子运动会口号
2019/10/11 职场文书