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定义函数的方法
Dec 06 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
业务经理的岗位职责
2013/11/16 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
保险公司晨会主持词
2014/03/22 职场文书
授权委托书样本
2014/04/03 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
酒店前台岗位职责
2015/04/16 职场文书
百万英镑观后感
2015/06/09 职场文书