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将Table导出到Excel实现思路及代码
Mar 13 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
vue下载二进制流图片操作
Oct 26 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
three.js实现圆柱体
2018/12/30 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python File readlines() 使用方法
2018/03/19 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python+flask实现API的方法
2018/11/21 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
离婚协议书范本
2015/01/26 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技