`

插入google地图

GoogleJavaScriptXHTMLHTML 
阅读更多 
<!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>
分享到：
| 网页插入PDF
评论
1 楼 l16426434 2010-11-11  
强。。。。太好用了
发表评论

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

相关推荐

    网页或者博客中插入英文谷歌动态地图

    网页或者博客中插入英文谷歌动态地图

    FCK编辑器谷歌地图插件 for pjblog.rar

    在其后插入谷歌地图按钮代码 'googlemaps',  然后在此文件的最后添加一句KEY代码如下 FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO...

    MFC中插入google在线或离线地图,MFC与google地图交互

    最近需要实验室需要将在无人机地面站中嵌入地图，在网上找了很多资料，终于有些眉目了， 首先，做这个需要用到的知识有，MFC控件、MFC类库、...下面总结一下这几天搞google地图的步骤， 在线Google 地图步骤：

    谷歌地图web

    该资源是对谷歌地图的研究，主要的功能是实现在谷歌地图上插入图片标签及文字显示。

    Google卫星地图下载后按照坐标转换插入到CAD的方法

    简述如何从Google卫星地图下载地图,并且通过七参数将卫星地图的WGS84坐标转换成西安80坐标，然后按转换后的坐标将卫星地图插入到CAD或者CASS里面使用，要准确插入关键是坐标转换的七参数计算，通过本人几次使用，...

    (word完整版)Google卫星地图准确插入到CAD的方法.doc

    (word完整版)Google卫星地图准确插入到CAD的方法.doc

    Google Map API 使用详解

    这是我从网上找到的在自己网页中插入google地图的编程资料，因为原资料是网页式的，所此我将这些资料整理成PDF文档，以方便大家使用。

    ASP.NET下使用免费Goolge地图(Map)服务端控件教程及源代码

    在我的应用场景中，我从SQL SERVER数据库中提取出地球的经度、纬度，用这些信息之Google地图对应位置插入插件。如果你熟悉Ajax框架，你一定知道解答的方法。于是作者写了这个控件，可以让大家更集中于服务端的功能。

    gmaps:适用于 Novius OS 的 Google Map API

    适用于 Novius OS 的 Google 地图用于创建 Google 地图并显示它的 Novius OS 应用程序。 非常感谢 Fumito Mizuno 的，这对我制作我的第一个应用程序有很... 然后在应用管理器中安装该应用，然后在页面中插入谷歌地图。

    nuxt-google-maps-module：插入Google Maps脚本

    Nuxt Google地图模块 用于导入Google地图脚本的NuxtJS模块 目录 要求 npm NuxtJS 节点JS 安装 $ npm install --save nuxt-google-maps-module 入门 添加nuxt-google-maps-module到modules的部分nuxt.config.js 。...

    奥维互动地图浏览器

    10、离线地图 您可在地图上随意设定区域,下载该区域内的Google地图、Google卫星图或Sogou地图,这将节约您95%以上的3G流量。 11、自绘地图 在windows版本上您可以利用该功能绘制出详尽的景区地图,分享给好友(手机端...

    GGGIS V21.80

    目前软件可以下载谷歌地图高清卫星地图、电子地图、地形图，支持国内的百度、高德、天地图等地图的下载。后期根据需要逐步增加地图源。地图包含无偏移影像，和偏移地图。其中无偏移支持xi’an80,Beijing54,CGCS2000,...

    web2py_google_maps_javascript_api:该项目展示了如何从普通的web2py应用程序中运行Google Maps Javascript API

    轻松在Web2Py视图内插入Google地图的主要障碍是： 除非所有封闭的div都具有包含非零高度的样式，否则Google Maps Javascript API不会呈现您的地图。 Web2Py将视图的主体放置在两个不包含ID属性的嵌套div中，因此...

    insights 插件

    Insights引入了撰写博客文章的新方式。它可以让用户更多产，同时增加文章的吸引力。 插件功能： •查找博客文章并进行编辑，或将查找到的文章链接插入当前文章 •插入Youtube视频 ...•插入Google地图

    django-map-widgets:Django Postgis字段的可插入地图小部件

    适用于Django PostGIS字段的可配置，可插入且更加用户友好的地图小部件。 说明文件： 项目首页： 成就成就 Django map widget的目的是使所有Geo Django widget更加用户友好和可配置。 目前，地图小部件仅支持...

    ASP.NET页面中使用Google Map

    例如，我想从SQL Server中读取经纬度信息，然后在Google Map中插入一个点。如果熟悉AJAX的话，很快就能得出答案。我们必须用JavaScript调用ASP.NET服务器端函数，利用得到的数据来绘制Google Map。简单吧？其实，...

    tiler太乐地图插件1.7

    太乐地图插件，可在arcmap中插入各种网络地图资源，支持百度谷歌必应等

    AutoCAD中动态浏览谷歌卫星地图的方法与应用 (2012年)

    在Visual Studio 2010平台下采用C#语言进行AutoCAD二次开发,最后实现了一个可以动态浏览谷歌卫星地图的插件,该插件允许用户浏览任意区域的谷歌卫星地图,并可将指定区域的卫星图片插入到AutoCAD中,以便进一步应用....

    leaflet-maps-with-google-sheets:在GitHub上使用链接的Google表格模板和GeoJSON数据来自定义Leaflet地图

    带有Google表格的传单地图 使用GitHub上的链接Google表格模板或CSV文件和...获取您自己的Google Sheets API密钥以插入google-doc-url.js 请参阅教程中的步骤G或H。 在2021年1月之前为2020年10月之前的任何地图更新代码

Magicbox
Global site tag (gtag.js) - Google Analytics