`

插入google地图

阅读更多
<!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>
分享到:
评论
1 楼 l16426434 2010-11-11  
强。。。。太好用了

相关推荐

    Qt加载百度地图和谷歌地图

    在本文中,我们将深入探讨如何在Qt环境中加载和使用百度地图及谷歌地图。Qt是一个功能强大的C++图形用户界面库,它可以与JavaScript和HTML结合,为开发者提供丰富的Web交互功能。我们将主要关注如何利用QWebView类来...

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

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

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

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

    谷歌地图API实现运行轨迹 画箭头操作的小例子

    这通常通过在HTML文件中插入一个JavaScript标签来完成,其中src属性指向谷歌地图API的URL,并附带一个API密钥以确保合法访问。例如: ```html &lt;script src="https://maps.googleapis....

    基于JavaScript+CSS的地图插件-文章中插入交互式地图(支持GoogleMap、高德地图、百度地图、Geoq地图和 OpenStreetMap).zip

    基于JavaScript+CSS的地图插件-文章中插入交互式地图(支持GoogleMap、高德地图、百度地图、Geoq地图和 OpenStreetMap).zip 文章中插入交互式地图。...[GoogleMap]你还将获得一个单独的谷歌地图+谷歌卫星地图

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

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

    离线Google瓦片地图

    Google地图就是采用这种瓦片系统来显示的。 接下来,我们来看看如何利用JavaScript处理这些瓦片地图。JavaScript是一种常用的Web编程语言,可以用于操作网页的动态内容。在这个项目中,js文件用于读取本地存储的...

    水晶易表中使用谷歌地图案例文件

    这个“水晶易表中使用谷歌地图案例文件”就是专门针对这种集成的应用实例,它为我们提供了学习和实践如何在水晶易表中嵌入和操作谷歌地图的宝贵资料。 1. **水晶易表基础** 水晶易表是Business Objects公司(现为...

    网页嵌套地图 嵌套地图 谷歌地图 web开放

    网页嵌套地图是一种技术,它允许开发者在网页中集成谷歌地图服务,为用户提供直观的地理位置信息展示。这种技术是基于Web开放标准,如HTML、CSS和JavaScript,利用谷歌地图API(应用程序接口)来实现的。下面我们将...

    谷歌地图搜索结果抓取

    "谷歌地图搜索结果抓取"这个项目涉及到了从谷歌地图的搜索结果中提取信息并将其显示在自定义页面上的过程。以下是对这一主题的详细说明: 首先,我们要了解的是谷歌地图的工作原理。谷歌地图是一个基于地理信息系统...

    谷歌地图web

    本文将深入探讨如何在谷歌地图Web上插入图片标签和文字显示,这是许多开发者和企业用于定制地图体验的重要功能。 首先,我们要了解谷歌地图API(应用程序接口)。谷歌地图API是一个强大的工具,它允许开发者集成...

    ArcGIS API for Javascript 4.10加载谷歌地图

    我们需要覆盖这个方法,根据谷歌地图的URL模板请求对应的瓦片,并将它们插入到地图中。 5. **事件处理**:为了确保地图的正常交互,我们需要监听地图的缩放和移动事件,以便在地图变化时重新加载相应的瓦片。 6. *...

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

    * 选择地图类型为谷歌地图混合图 * 下载地图并获取 WGS84 经纬度坐标 知识点二:坐标转换 * 使用《万能坐标转换》软件进行坐标转换 * 将 WGS84 经纬度坐标转换为西安 80 坐标系 * 需要三个已知坐标点用于七参数...

    js谷歌地图

    在JavaScript中,谷歌地图API(Google Maps API)是一种强大的工具,允许开发者在网页上集成交互式的地图服务。本文将深入探讨如何使用这个API来在页面上显示谷歌地图,以及涉及的相关知识点。 首先,我们需要理解...

    android使用google地图

    在Android平台上集成Google地图是一项常见的任务,这可以让用户在应用中直接查看地理位置、导航和进行其他地图相关的操作。本文将详细介绍如何在Android应用中使用Google地图API,包括添加API密钥、集成maps.jar库...

    js jquery 地图 百度地图 谷歌地图 插件及实现 chm手册

    JavaScript 和 jQuery 在网页开发中广泛应用于创建交互式地图功能,其中百度地图和谷歌地图是最常用的API服务提供商。这篇chm手册详细介绍了如何利用这两种地图服务以及相关的插件来实现地图功能。 1. JavaScript...

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

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

    google地图Demo

    本文将深入探讨如何在Android项目中实现一个简单的Google Maps Demo,基于提供的标题"google地图Demo"和描述"Android google map简单加载地图,能直接运行显示出地图"。 首先,我们需要确保在Android Studio项目中...

    google map 谷歌地图joomla!插件

    谷歌地图Joomla!插件是一种将Google Maps集成到Joomla!网站中的工具,它允许网站管理员在内容中嵌入交互式地图,为用户提供地理信息、导航功能或展示地点分布。这款插件是针对Joomla 1.0x及1.5+原生版本设计的,版本...

    android 谷歌地图应用

    在Android平台上开发应用程序时,谷歌地图API是一个强大的工具,它允许开发者将地图功能无缝集成到他们的应用中。本文将深入探讨如何在Android应用中使用谷歌地图,并解决在显示地图时可能遇到的问题。 首先,让...

Global site tag (gtag.js) - Google Analytics