google地图静态api使用助手（html源码）

最新推荐文章于 2022-11-30 16:31:13 发布
最新推荐文章于 2022-11-30 16:31:13 发布
阅读量1.2k 收藏
点赞数
分类专栏： 学生时代 
<!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" οnclick="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="#" οnclick="delMapFlag(this);">
										删除
									</a>
									<a style="color:Blue; font-size:12px;" href="#" οnclick="addMapFlag(this);">
										新增
									</a>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>
					</td>
					<td>
						<input type="button" value="获 取" οnclick="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>

另附有百度地图API-静态地图生成助手地址：
http://api.map.baidu.com/lbsapi/staticmap/staticmap-helper.html

sanzhong104204
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Google 地图 google map api / 地图有关
07-30
11. **性能优化**：如使用静态地图API减少动态请求，或者利用分块加载技术提高加载速度。 12. **权限和配额管理**：Google Maps API有使用限制，开发者需要了解并合理管理配额，防止因超限导致的服务中断。 13. **...
超强后端管理静态页面源码
04-11
【超强后端管理静态页面源码】是一套基于HTML5技术构建的静态页面源代码，设计用于后端管理系统。这套源码充分利用了HTML5的新特性，提供了完整的前端界面，包括登录、用户管理、数据展示等多个功能模块。由于是静态...
从零开始学google地图API(1)--获取api_key并显示google地图
azraelxuemo的博客
06-16 3434
google 登录进去 ,如果有google账号就直接登录，如果没有就注册登录 进去之后大概这个样子 点击左边的Google地图会看到有很多api,选择你需要使用的 这里我们选择Maps JavaScript API 点击进去启用就可以 然后我们需要记住我们的api key 可以在凭据里面找到 <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=
百度地图生成器
经验在于积累而不在于年限---dreamboycx
11-19 1732
百度地图API自定义地图 html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px
网页中Google Map的使用
weixin_34279246的博客
01-08 426
要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种： 1、最简单的方法 ——使用谷歌地图主页的"链接"       如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。       登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给...
J2ME google map实现
zou_12345的博客
12-07 106
代码如下： package com.j2me.google; import javax.microedition.lcdui.Canvas; import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.Image; /** * @auth...
html map插件,jQuery谷歌地图插件maplace.js
weixin_32334251的博客
06-17 462
插件描述：Maplace.js帮助你嵌入你的网站，谷歌地图，快速创建标记和控制菜单在地图上的位置。非常小的谷歌地图jQuery插件Maplace.js帮助你嵌入你的网站，谷歌地图，快速创建标记和控制菜单在地图上的位置。需要jQuery的谷歌地图API v3的在您的网页。特点直接实现简单的选项可以运行所需的许多地图标记和自定义图标，缩放级别和自定义控件菜单支持方向，多边形，折线，融合表和风格的地图作...
易语言google地图生成工具源码.rar
06-27
易语言google地图生成工具源码是一个使用易语言编程开发的应用程序，主要功能是生成与Google地图相关的图像或数据。这个工具对于学习地图API、地理信息系统（GIS）以及易语言编程的人来说是一个宝贵的资源。源码的...
WPF地图应用程序：WPF符合Google地理编码和静态地图API
04-11
接着是Google静态地图API，它允许开发者生成并嵌入到网页或者桌面应用中的静态（非交互式）地图图像。我们可以通过指定中心点、缩放级别、图层类型、标记等参数，自定义地图的外观。 在WPF环境中，可以使用.NET框架...
网站数据统计后台管理页面html静态模板
12-04
13. **maps.html**：地图集成在后台管理页面中可能用于地理位置数据的展示，例如用户分布、门店位置等，通常会用到第三方地图服务如Google Maps或百度地图的API。 以上这些元素和功能共同构成了一个完整的网站数据...
Google地图坐标拾取器(HTML版，含国服和国际服版本)
10-26
前言： 客户是做出国留学的公司，运营人员在录入国外信息时需要填写坐标，于是动手给客户写了一个这个小工具。 在翻阅以前的项目的时候忽然看到了这个小工具，觉得还不错，就共享给大家。 使用方法： 单击地图即可获取经纬度（不是拖动，是单击） 因为考虑到他们公司的员工频繁的出国，所以让客户在国内和国外都可以使用该工具所以就写了两个html YtoUCoordinateTool_China_Server.html 这个html使用的是中国google map服务器。 YtoUCoordinateTool_International_Server 这个html使用的是国际google map服务器。
vc++开发的google地图定位系统
06-07
vc++开发的google地图定位系统 输入经纬度即可快速定位地点，适合做移动开发的研究学习
VC/MFC中通过WebBrowser控件调用google map，并实现用户输入地理坐标跳转
07-04
本程序实现了如下功能： (1)VC中通过浏览器控件，加载指定html，在html中用javascript调用google map (2)通过CWebPage类实现了VC调用javascript函数，并向函数传参。 (3)VC程序运行过程中用户可以在编辑框上输入经纬度坐标，点击按钮后地图跳转到坐标位置 (4)压缩包里含google map API中文参考手册，在javascript中用的到的。 对于想在VC中调用google map 的新手是极大的帮助。
google地球api
06-19
google地球API开发文档。厌倦了平面地图的可以使用google地球试试
HTML5 google地图js代码
11-21
很小很实用的地图插件,直接放到页面就可以使用，太完美了
html中嵌套谷歌定位地图
最新发布
Sunny_lxm的博客
11-30 768
html中嵌套谷歌定位地图
谷歌地图api的使用 一
热门推荐
cc_1209的博客
04-20 1万+
一、注册账号 使用谷歌地图api，需要注册一个谷歌账号，并创建一个你的项目，在项目中开通你所需要的api。 谷歌地图api网址：https://cloud.google.com/maps-platform/?hl=zh-CN 具体的注册和开通在这就不做描述了，网上搜索既有。 二、api请求实例 谷歌api库：https://console.cloud.google.com/apis/library...
Google静态地图API详解
CARROTHWQ的专栏
11-04 4976
2012-07-17 14:08:44|  分类： 科技之光|字号 订阅 限制 每位查看者每天的唯一（不同）图片请求次数不超过1000次。静态地图网址的长度不超过2048个字符，如果生成大量标记和路径的复杂地图，可能超过限制（浏览器/服务器可能对某些字符进行网址编码，导致字符量增加）。 示例 这个URL有几个参数： 请求地址：ht
开源的地图引擎代码
07-17
开源的地图引擎代码， C++（vs2005）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值