首页 / JAVASCRIPT / Google 静态地图API实现代码

Google 静态地图API实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Google 静态地图API实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5414字，纯文字阅读大概需要8分钟。

内容图文

代码如下:
<!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>

<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

内容总结

以上是互联网集市为您收集整理的Google 静态地图API实现代码全部内容，希望文章能够帮你解决Google 静态地图API实现代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/370233.html

来源：【匿名】

【上一篇】CSS和JS标签style属性对照表(方便js开发的朋友)【下一篇】javascript 怎么调用php方法

更多 ►

【Google 静态地图API实现代码】教程文章相关的互联网学习教程文章

asp.net中JavaScript数据验证实现代码

今天在做一个数据修改的页面，页面上有一个DropDownList控件，绑定的是实体中的重要属性，我希望用户在修改该控件值的时候，提示用户，他修改了该控件的值。所以为该下拉控件加上了如下语句。复制代码代码如下:DDLmaterial.Attributes.Add("onchange", "alert(‘注意：您修改了物品类型!‘)"); 似乎不错，不仅有提示效果，也不需要刷新页面。可是当我打开页面进行测试的时候就发现了问题，当我把下拉控件的值改回原值的时候，它还...

一个简单的JavaScript数据缓存系统实现代码

代码如下:var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; return key; }, remove : function(key){ delete this.caches[key]; }, get : function(key){ return this.caches[key]; }, set : function(key,val){ this.caches[key] ...

一个简单的JavaScript数据缓存系统实现代码_javascript技巧

代码如下: var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; return key; }, remove : function(key){ delete this.caches[key]; }, get : function(key){ return this.caches[key]; }, set : function(key,val){ this.caches[key]...

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)【图】

很庆幸，我又见到了末日后新升的太阳，所以我还能在这里写文章，言归正传哈，最近做了一个项目，需要用子域名调用主域名下的一个现有的功能，于是想到了用jsonp来解决，在我们平常的项目中不乏有这种需求的朋友，于是记录下来以便以后查阅同时也希望能帮到大家。什么是JSONP协议? JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用...

JavaScript用JQuery呼叫Server端方法实现代码与参考语法【图】

Insus.NET从2013年开始学习Javascript，此博文是第一次使用JQuery，从Javascript客户端用JQuery呼叫Server端的方法。首先看看此例的演示：准备好Server端的方法：代码如下:[System.Web.Services.WebMethod] public static string VeryUserName(string name) { string rtn = "恭喜，此帐号还没有注册，你可以使用。"; if (name == "") rtn = "请填写一个注册帐号。"; if (name == "Insus.NET") rtn = "此用户已经注册，请使用另...

vue+vue-validator 表单验证功能的实现代码

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址：https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能，具体代码如下所示： 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-validate:zip="[required]"...

JQuery里选择超链接的实现代码

语法规则如下： $('a[href$="ABC"]')... 支持的选择方式如下： = 判断完全相符； != 不相符； ^=以某字符串开头； $=以某字符串结尾； *=包含某字符串。进一步，可以通过$('a[href$="ABC"]:first')返回结果集中的第一条记录如果需要遍历结果集：代码如下:$(a[href*=/Lists/Booking/DispForm.aspx]).each(function(){ // $(this)… }); 如果要获取相关属性可以通过$(a[href$="ABC"]:first).attr(‘title)等来获取如果需要返回...

cookie的复制与使用记住用户名实现代码

代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { if ($....

微信小程序封装自定义弹窗的实现代码【图】

最近在做小程序的登录，需要同时获取用户手机号和头像昵称等信息，但是小程序又不支持单个接口同时获取两种数据，因此想到自定义一个弹窗，通过弹窗按钮触发获取手机号事件。记录一下。具体代码如下：业务代码中：在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"><view class=dialog-body slot="dialog-body"><view class=dialog-content>申请获取你微信绑...

使用jQuery操作Cookies的实现代码_jquery

当你浏览某网站时，你硬盘上会生产一个非常小的文本文件，它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。从本质上讲，它可以看作是你的身份证。使用传统的Javascript来设置和获取Cookies信息很麻烦，要写上几个函数来处理，幸运的是jQuery帮我们做了很...

jQuery 淡入淡出、展开收缩菜单实现代码【图】

效果图:运行以后，刷新下即可。jQuery淡入淡出、展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;} $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 ...

JS判断元素是否在数组内的实现代码

一、JQuery 如果是用JQuery的话，可以用inArray()函数： jquery inarray()函数详解 jquery.inarray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。 determine the index of the first parameter in the array (-1 if not found). 返回值 jquery 参数 value (any) : 用于在数组中查找是否存在 array (array) : 待处理数组。用法为：代码如下: $.inArray(value, array) 二、自己写函数 function contains(ar...

jQuery获取浏览器中的分辨率实现代码

代码如下:<script type="text/javascript"> $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽...

Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码

在调试功能模块时候，发现怎么用什么方法都无法在infowindow里面添加的div进行绑定事件处理。郁闷啊！上网搜了好多方法也没用，后来想想还是查了一下官方的API，发现了google.maps.InfoWindow下面的Events里面有个domready事件官方解释： This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dyna...

使用jQuery操作Cookies的实现代码

首页 / JAVASCRIPT / Google 静态地图API实现代码

Google 静态地图API实现代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【Google 静态地图API实现代码】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程