Google 静态地图API实现代码

代码如下:

<!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.jb51.net/js/googleStaticMap/index.html

赞 (0)

相关推荐

  • Google 地图类型详解及示例代码

    Google 地图类型 Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: 1.MapTypeId.ROADMAP,用于显示默认的道路地图视图 2.MapTypeId.SATELLITE,用于显示 Google 地球卫星图片 3.MapTypeId.HYBRID,用于同时显示普通视图和卫星视图 4.MapTypeId.TERRAIN,用于根据地形信息显示实际地图. 要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性: var

  • 为IP查询添加GOOGLE地图功能的代码

    1. 在使用google api之前,我们需要先申请一个key,作为唯一的标示加在url后面. 2. google地图api里面有一个可以查询到某个地点的详细信息的地址,例如查询北京的:http://maps.google.com/maps/geo?q=beijing 3. 我们还可以把上面的地址后面加一个参数,让它输出我们想要的数据,例如我们需要csv的数据,那么地址就成了http://maps.google.com/maps/geo?q=beijing&output=csv 4. 这样我们就

  • google地图的路线实现代码

    复制代码 代码如下: <script language="javascript" type="text/javascript"> //add by ahuinan 2009-8-17 //initialize(23.165613663312594,113.35968017578125) var map; var gdir; var marker2; var hasMarker = false; var hotelLatLng = new GLatLng(

  • Google 地图叠加层实例讲解

    Google 地图叠加层实例讲解

    Google 地图 - 叠加层 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动. Google 地图 API 有如下几种叠加层: 1.地图上的点使用标记来显示,通常显示自定义图标.标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标. 2.地图上的线使用折线(表示点的集合)来显示.线是类型为 GPolyline 的对象. 3.地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域).多边形类似于闭合的折线,因此可以是任何

  • php使用google地图应用实例

    本文实例讲述了php使用google地图应用方法.分享给大家供大家参考.具体如下: php代码如下: 复制代码 代码如下: function selected ( $param , $value ) {  if ( $param == $value ) print "SELECTED" ;  }   # Collect any form data to control the display   $scale = 10 ;  $maptype = "G_NORMAL_MAP&

  • Google 地图获取API Key详细教程

    Google 地图获取API Key详细教程

    Google 地图API Key 开始学习本教程前,你需要拥有一个免费的 Google 地图 API key. 开始学习? 开始学习本教程前,你需要在Google上申请一个指定的API key. 通过以下步骤我们可以免费获取 API key . 访问 https://code.google.com/apis/console/, 使用你的Google账号登陆. 登陆后会出现如下界面: 点击 "Create Project" 按钮. 在服务列表中找到 Google Maps API v3,

  • Google 地图控件集详解及实例代码

    Google 地图控件集详解及实例代码

    Google 地图控件集 Google 地图 - 默认控件集设置: 当使用一个标准的google地图,它的默认设置如下: 1.Zoom-显示一个滑动条来控制map的Zoom级别 2.PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图 3.MapType-允许用户在map types(roadmap 和 satallite)之间切换 4.StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景 Google 地图 - 更多控件集 除了以上默认控件集,Google还有

  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度

    实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换 存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +

  • Google Maps API地图应用示例分享

    Google Maps API地图应用示例分享

    效果(新版Firefox中测试): 代码: <!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://

  • Google 地图API资料整理及详细介绍

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标记. MarkerOptions 标记的选项.由DirectionsRenderer渲染的所有标记都将使用这些选项. MarkerImage A structure representing a Marker icon or shadow image MarkerShape Defines the

  • Google 地图事件实例讲解

    Google 地图事件 点击标记缩放地图 我们仍然使用上一遍文章使用的英国伦敦的地图. 点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script>

随机推荐