插入google地图

gundumw100

浏览: 5819332 次
性别:
来自: 上海

最近访客更多访客>>

李大喵和李小喵

hjg8858

henseycai

beishen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript+css+html

Google JavaScript XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地图 JavaScript API 示例: 控件定位</title>
<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=en" type="text/javascript"></script>

<script type="text/javascript">
	function initialize() { //地图初始化函数
		var map = new GMap2(document.getElementById("map_canvas"));//创建地图
		map.setCenter(new GLatLng(40.7142691,-74.0059729), 13);     //区域 深度

		var point = new GLatLng(40.7142691, -74.0059729);            //坐标
		map.addOverlay(new GMarker(point));                      //增加标点
		map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world")); //增加提示框

		var topRight = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));//取得右上10*10的中心点
		var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));//取得右下10*10的中心点

		map.addControl(new GSmallMapControl(), topRight);       //增加控件 左上角放大缩小工具
	   
		///var smallMapControl = new GOverviewMapControl();        //创建右下缩略图
		map.addControl(smallMapControl, topRight);              //增加控件     
	   
	}
  
	function vok2(){ //获取经纬度函数
		var address=document.getElementById('t').value;
		if (address=="") return "请输入要查询的地址";
		var map = new GMap2(document.getElementById("map_canvas"));//创建地图
		var geocoder = new GClientGeocoder();
		   geocoder.getLatLng(
			address,
			function(point) {
			  if (!point) {
				alert(address + " 无地址！");
			  } else {
				map.setCenter(point, 14);
				var marker = new GMarker(point);
				document.getElementById('v').innerHTML=point;
				map.addOverlay(marker);
				marker.openInfoWindowHtml(address);
			  }
			}
		);
	}

	function calDis(){//调用函数
		var lat1 = document.getElementById( "X1").value * 1;
		var lng1 = document.getElementById( "Y1").value * 1;
		var lat2 = document.getElementById( "X2").value * 1;
		var lng2 = document.getElementById( "Y2").value * 1;
		var dis = GetDistance(lat1, lng1, lat2, lng2);
		document.getElementById("ss").innerHTML ="2点距离是: "+ dis+" km";
	}

	function rad(d)//函数中间调用
	{
		return d * Math.PI / 180.0;
	}

	function GetDistance( lat1, lng1, lat2, lng2)//获取公里数
	{
		if( ( Math.abs( lat1 ) > 90 ) ||( Math.abs( lat2 ) > 90 ) ){
			return false;
		}
		if( ( Math.abs( lng1 ) > 180 ) ||( Math.abs( lng2 ) > 180 ) ){
			return false;
		}
		var radLat1 = rad(lat1);
		var radLat2 = rad(lat2);
		var a = radLat1 - radLat2;
		var b = rad(lng1) - rad(lng2);
		var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
		Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
		s = s *6378.137 ;// EARTH_RADIUS;
		s = Math.round(s * 10000) / 10000;
		return s;
	}
</script>


</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="map_canvas" style="width: 500px; height: 300px"></div>
	<div> 
		<input name="t" type="text" id="t"/>
		<span onclick="vok2();" style="cursor:pointer">[查询]</span>
		<span id="v"></span>
    </div>
	<br /><br />
    <div >
		A:<input type="text" id="X1"/>-<input type="text" id="Y1"/><br />
		B:<input type="text" id="X2"/>-<input type="text" id="Y2"/>
		<span onclick="calDis();" style="cursor:pointer">[计算]</span>
		<span id="ss"></span>
    </div>
   
</body>
</html>

分享到：

SQL练习题 | 网页插入PDF

2010-03-11 11:00
浏览 2101
评论(1)
分类:Web前端
查看更多

1 楼 l16426434 2010-11-11

强。。。。太好用了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

插入google地图

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

插入google地图

评论

发表评论

相关推荐

网页插入PDF

弹出层（Div）屏蔽父窗口并且让父窗口变暗

高效判断星期几的 javascript代码

Meta 标签使用详解

去掉图片超级链接上的虚线框

Javascript与CSS在IE和Firefox中的误区及区别

html table 标题 不滚动

100个很有用的JavaScript函数

几个不常用但很有用的javascript方法

CSS中的一些小技巧

如何让一个iframe 背景透明？

判断文本框还剩多少字符可以输入

关键字高亮显示

在javascript中获取中英文字符长度的问题

验证用户名是否符合长度要求

在你的网页中插入天气预报

JSTL之<c:forEach>

<logic:iterate>同for循环的用法比较

关闭时才执行的javasciprt

div + css命名规则

最近访客更多访客>>

html table 标题不滚动