`
sanshizi
  • 浏览: 85501 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Google地图API使用demo

google map谷歌地图API 
阅读更多 

<html xmlns="http://www.w3.org/1999/xhtml">  
<head><title>API3_DrawCircle</title>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/gsearch.css"/>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css"/>
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true" type="text/javascript"></script> 
<script type="text/javascript" language="JavaScript">  
var map = null;  
var cicles=new Array();//所有圆集合
function displayMap(){
	var myOptions = {
		zoom: 12,  
		center: new google.maps.LatLng(22.54077580925294,114.04699606323243),  
		mapTypeId: google.maps.MapTypeId.ROADMAP  
	};   
	map = new google.maps.Map(document.getElementById("map"),myOptions); 
	google.maps.event.addListener(map, 'click', function(event) {
		if (event) {
			createCircle(new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()),500,800,map);  
		}
	});  

	google.maps.event.addListener(map, 'rightclick', function(event) {
		if (event) {
			cicles.pop().remove();
		}
	});
}


var metric = false;  
var singleClick = false;  
var infowindow = new google.maps.InfoWindow({
	content: ""  
}); 

function createCircle(point, radius1,radius2,map) {
  singleClick = false;  
  var geoQuery = new GeoQuery();  
  geoQuery.initializeCircle(radius1,radius2,point, map);   
  geoQuery.render(); //圆的渲染 
  cicles.push(geoQuery);
}
  
/** 
 * 
 * 算法:通过原点、角度和距离计算目标点的坐标 
 * orig:原点坐标 
 * hdng:角度 
 * dist:原点的到目标点的距离 
 * @return 目标点坐标 
 *  
 */  
function destination(orig, hdng, dist){
  var R = 6371; // earth's mean radius in km  
  var oX, oY;  
  var x, y;  
  var d = dist/R;  // d = angular distance covered on earth's surface  
  hdng = hdng * Math.PI / 180; // degrees to radians  
  oX = orig.lng() * Math.PI / 180;  
  oY = orig.lat() * Math.PI / 180;  
  
  y = Math.asin( Math.sin(oY)*Math.cos(d) + Math.cos(oY)*Math.sin(d)*Math.cos(hdng) );  
  x = oX + Math.atan2(Math.sin(hdng)*Math.sin(d)*Math.cos(oY), Math.cos(d)-Math.sin(oY)*Math.sin(y));  
  
  y = y * 180 / Math.PI;  
  x = x * 180 / Math.PI;  
  return new google.maps.LatLng(y, x);
}
  
/** 
 * 
 * 算法:计算两个坐标点的距离 
 * point1:坐标点1 
 * point2:坐标点2 
 * @return 两点的距离  
 * 
 */  
function distance(point1, point2){
  var R = 6371; // earth's mean radius in km  
  var lon1 = point1.lng()* Math.PI / 180;  
  var lat1 = point1.lat() * Math.PI / 180;  
  var lon2 = point2.lng() * Math.PI / 180;  
  var lat2 = point2.lat() * Math.PI / 180;  
  
  var deltaLat = lat1 - lat2  
  var deltaLon = lon1 - lon2  
  
  var step1 = Math.pow(Math.sin(deltaLat/2), 2) + Math.cos(lat2) * Math.cos(lat1) * Math.pow(Math.sin(deltaLon/2), 2);  
  var step2 = 2 * Math.atan2(Math.sqrt(step1), Math.sqrt(1 - step1));  
  return step2 * R;  
}
  
/** 
 * 画圆的类 
 * 
 */  
function GeoQuery() {}
  
  
  
function MyMap(map,cricle,polylines,markers) {
	this.prototype._map=map;
	this.prototype._circle=circle;
	this.polylines=polylines;
	this.markers=markers;
}


GeoQuery.prototype.CIRCLE='circle';        //画的形状  
GeoQuery.prototype.COLORS=["#0000ff", "#00ff00", "#ff0000"];  //圆的颜色  
var COLORI=0;             //默认颜色为0  
  
GeoQuery.prototype = new GeoQuery();  
GeoQuery.prototype._map;  
GeoQuery.prototype._type;  
GeoQuery.prototype._radius;  
GeoQuery.prototype._dragHandle;  
GeoQuery.prototype._centerHandle; 
GeoQuery.prototype._polyline1;  
GeoQuery.prototype._polyline2; 
GeoQuery.prototype._color;  
GeoQuery.prototype._control;  
GeoQuery.prototype._points1; 
GeoQuery.prototype._points2; 
GeoQuery.prototype._dragHandlePosition;  
GeoQuery.prototype._centerHandlePosition;
GeoQuery.prototype.markers;
GeoQuery.prototype.centers;
GeoQuery.prototype.polylines;
/** 
 * 
 * 圆的加载 
 * 
 */  
GeoQuery.prototype.initializeCircle = function(radius1,radius2,point, map){
    this._type = this.CIRCLE;    //圆形   
    this._radius1 = radius1;     //半径1
	this._radius2 = radius2;     //半径2
    this._map = map;      //地图
   
	//计算扩大圆的点的位置  
	 var distance1 = this._radius1/1000;  
	 var newPoint = destination(point,180,distance1);  
	 distance1 = distance(point,newPoint);
	 

      
    this._dragHandlePosition = destination(point, 90, distance1);   
    //设置扩大圆的点的样式  
		this._dragHandle = new google.maps.Marker({
        position: this._dragHandlePosition,   
        map: map,  
		draggable:true,  
        icon:"resizeArrow.png"  
    });
 //中心点的位置  
    this._centerHandlePosition = point;  
 //设置中心点的样式  
    this._centerHandle = new google.maps.Marker({
        position: this._centerHandlePosition,   
        map: map,  
		draggable:true,  
		flat:false
    });
    
 //随机获取颜色  
    this._color = this.COLORS[(COLORI++) % 3];  
	
	//在地图上加载圆形  
    this._dragHandle.setMap(map); 
    this._centerHandle.setMap(map);  
   
    var myObject = this;  
 //扩大圆的点的拖拽事件  
	google.maps.event.addListener(myObject._dragHandle, 'drag', function() {myObject.updateCircle(1);});  
	
   
 //跳出的infowindow
	google.maps.event.addListener(myObject._dragHandle, 'drag', function(){myObject.updateCircle(1);});  
   
 //圆的中心点的点击事件  
	google.maps.event.addListener(myObject._centerHandle, 'click', function(){
	  infowindow.setContent("我的窗口");  
	  infowindow.open(myObject._centerHandle.get('map'), myObject._centerHandle);  
    });  
 //圆的中心点的拖拽停止事件
 /*
 google.maps.event.addListener(myObject._centerHandle, 'dragend', function() {  
  myObject.updateCircle(2);  
    
  alert(myObject._dragHandlePosition);  
  alert(myObject._radius);  
 });
*/
 //圆的中心点的拖拽事件  
 google.maps.event.addListener(myObject._centerHandle,'drag', function() {myObject.updateCircle(2);});
 var flightPlanCoordinates=[
        new google.maps.LatLng(37.772323, -122.214897),
        new google.maps.LatLng(21.291982, -157.821856),
        new google.maps.LatLng(-18.142599, 178.431),
        new google.maps.LatLng(-27.46758, 153.027892)
 ];
 new google.maps.Marker({
        position: new google.maps.LatLng(37.772323, -122.214897), 
        map: map,
        title:"Hello World!"
});
 new google.maps.Marker({
        position: new google.maps.LatLng(21.291982, -157.821856),
        map: map,
        title:"Hello World!"
    });
 new google.maps.Marker({
        position: new google.maps.LatLng(-18.142599, 178.431),
        map: map,
        title:"Hello World!"
    });
new google.maps.Marker({
        position: new google.maps.LatLng(-27.46758, 153.027892),
        map: map,
        title:"Hello World!"
});
new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2,
	  map:map
 });
}
  
/** 
 * 
 * 圆的修改
 * type:1为扩大缩小点，其他为中心点 
 * 
 */  
GeoQuery.prototype.updateCircle = function(type){
  this._polyline1.setMap(null);  
  this._polyline2.setMap(null);  
    if (type==1) {
      this._dragHandlePosition = this._dragHandle.getPosition();  
      this._radius1 = distance(this._centerHandlePosition, this._dragHandlePosition) * 1000;
	  this._radius2 = distance(this._centerHandlePosition, this._dragHandlePosition) * 1000;
      this.render();  
    }else{
      this._centerHandlePosition = this._centerHandle.getPosition();  
      this.render();  
      this._dragHandle.setPosition(this.getEast());  
    }   
}
/** 
 * 
 * 圆的渲染 
 * 
 */  
GeoQuery.prototype.render = function() {
	  if (this._type == this.CIRCLE) {
		this._points1 = [];  
		this._points2 = [];  
		
	 //var dis = distance(this._points[0],this._points[1])/2;  
	 //var newPoint = destination(this._points[0],180,dis);  
	 
		var distance1 = this._radius1/1000;
		var distance2 = this._radius2/1000;
		  
		for (i = 0; i < 72; i++) {
			  this._points1.push(destination(this._centerHandlePosition, i * 360/72, distance1));  
		}
		for (i = 0; i < 72; i++) {
			  this._points2.push(destination(this._centerHandlePosition, i * 360/72,distance2));  
		}
	this._polyline1 = new google.maps.Polygon({
		  paths: this._points1,  
		  strokeColor: "#00FF00",  
		  strokeOpacity: 0.8,  
		  strokeWeight: 2,  
		  fillColor: "#00FF00",  
		  fillOpacity: 0.35  
		});   
		this._polyline1.setMap(this._map);
		this._polyline2 = new google.maps.Polygon({
		  paths: this._points2,  
		  strokeColor: "#FF0000",  
		  strokeOpacity: 0.8,  
		  strokeWeight: 2,  
		  fillColor: "#FF0000",  
		  fillOpacity: 0.35  
		});   
		this._polyline2.setMap(this._map);
		/*
		google.maps.event.addListener(this, 'drag', function() {
			this._radius+=100;
		});
		*/
	  }
}
  
  
/** 
 * 
 * 圆的删除 
 * 
 */  
GeoQuery.prototype.remove = function() {  
 this._polyline1.setMap(null);  
  this._polyline2.setMap(null);  
 this._dragHandle.setMap(null);  
 this._centerHandle.setMap(null);  
}
  
GeoQuery.prototype.getRadius = function() {  
    return this._radius;  
}  
  
GeoQuery.prototype.getHTML = function() {  
  return "<span><font color='"+ this._color + "''>" + this.getDistHtml() + "</font></span>";  
}
GeoQuery.prototype.getDistHtml = function(){
  result = "<img src='http://jfno.net/images/close.gif' onClick='myQueryControl.remove(" + this._control.getIndex(this) + ");'/>Radius ";  
  if (metric) {
    if (this._radius < 1000) {  
      result += "in meters : " + this._radius.toFixed(1);  
    } else {  
      result += "in kilometers : " + (this._radius / 1000).toFixed(1);  
    }  
  } else {  
    var radius = this._radius * 3.2808399;  
    if (radius < 5280) {  
      result += "in feet : " + radius.toFixed(1);  
    } else {  
      result += "in miles : " + (radius / 5280).toFixed(1);  
    }  
  } 
  return result;     
}  
  
GeoQuery.prototype.getNorth = function() {  
  return this._points[0];  
}
  
GeoQuery.prototype.getSouth = function() {  
  return this._points[(72/2)];  
}  
  
GeoQuery.prototype.getEast = function() {  
   
 var dis = distance(this._points1[0],this._points1[1])/2;  
 var newPoint = destination(this._points1[0],180,dis);  
 return newPoint;   
  //return this._points[(72/4)];  
}  
  
GeoQuery.prototype.getWest = function(){  
  return this._points1[(72/4*3)];  
}
</script>
</head>  
<body onload="displayMap();" style="width: 100%; height: 100%; margin: 0px;">  
 <div id="map" style="width: 100%; height: 95%;"></div>  
 <!--<div style="font-family: arial, sans-serif;">Made by <a href="http://www.3rdcrust.com">3rdCrust.com</a></div>  
 <div id="QueryControl"></div>  
 <div id="ads">  
 </div --> 
</body>  
</html>
分享到：
| 用java读取svn数据, oh yeah
评论
发表评论

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

相关推荐

    google地图API实现的一个简单demo

    在这个"google地图API实现的一个简单demo"中，我们将探讨如何使用谷歌地图API创建一个基本的地图展示，并实现一些基础功能。 首先，你需要在Google Developers Console（谷歌开发者控制台）上注册一个项目，获取API...

    Android google地图api Demo

    在这个名为"Android google地图api Demo"的项目中，我们将深入探讨如何使用Google Maps API在Android应用上实现一个简单的地图展示示例。 首先，我们需要在Google Cloud Console上注册一个新的项目，并启用Google ...

    GoogleMap谷歌地图demo

    本文将深入探讨GoogleMap谷歌地图API的使用，以及如何通过它实现一个全面的地图工具。 首先，让我们从标题"GoogleMap谷歌地图demo"开始。这个标题暗示我们将会讨论一个基于GoogleMap API开发的示例应用。一个demo...

    谷歌离线地图含地图调用demo

    "地图调用demo"则意味着提供了一个示例项目，展示如何使用谷歌地图API来实现离线地图的功能。这个demo包含了一整套代码和配置，可以帮助开发者理解如何在实际项目中集成离线地图功能，从而节约网络资源，提高用户...

    真实好用的javaweb上使用的googlemap的demo

    本Demo主要展示了如何在JavaWeb项目中有效地整合Google Maps API，以实现丰富的地图交互功能。以下将详细介绍这个Demo涉及的关键知识点： 1. **Google Maps API**：Google Maps API是Google提供的一个强大的服务，...

    谷歌地图 demo

    谷歌地图使用的基础 demo 可快速掌握 基本API的使用

    googlemap地图demo+doc

    【标题】"googlemap地图demo+doc" 涉及的知识点主要集中在使用Google Map API在Android平台上进行地图开发，包括展示地图、定位、添加标记、路径规划等基本功能的实现。Google Map API是Google提供的一个强大的服务...

    Google离线地图，通过demo.html可以直接打开

    本篇文章将详细讲解如何利用Google Map API 3实现离线地图功能，并通过提供的"demo.html"来展示具体操作。 首先，我们要了解Google Maps API 3。这是Google Maps服务的JavaScript版本，用于在网页上嵌入交互式地图...

    google地图demo

    这篇博客"google地图demo"可能详细介绍了如何使用Google地图API创建一个简单的示例应用。由于描述部分为空，我们将主要依赖标签“源码”和“工具”来推测这个压缩包的内容。 首先，我们要理解Google地图API的工作...

    Android百度地图API v2.0开发Demo

    通过这个开发Demo，开发者可以深入理解百度地图API v2.0的使用方法，为自己的Android应用添加丰富的地图功能。同时，清晰的注释和完整的代码结构也便于学习和参考，对于初学者来说是一份宝贵的资源。

    C#做的谷歌地图Demo

    【C#谷歌地图DEMO】是一个使用C#编程语言实现的示例项目，它展示了如何与谷歌地图API进行交互，从而在Windows应用程序中嵌入和操作谷歌地图。这个项目不仅包含源代码，还可能附带了必要的DLL文件，用于与谷歌地图...

    Flutter集成百度地图api 这个demo是Flutter项目集成百度地图api 显示地图

    确保在发布应用时，遵循百度地图API的使用规定，避免因为API调用限制导致的问题。 在`Flutter_integration_map-master`这个示例项目中，应该包含了完整的代码示例，你可以参考该项目的结构和实现，进一步理解和学习...

    百度地图demo带分析20190315

    【标题】"百度地图demo带分析20190315"是一个关于在Android Studio中集成和使用百度地图API的示例项目。这个DEMO旨在展示如何在Android应用程序中实现地图功能，包括绘制覆盖物、折线，以及设置标记，并且支持轨迹...

    google地图Demo

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

    ios源码之google地图demo.rar

    本资源"ios源码之google地图demo.rar"提供了一个使用Google Maps SDK for iOS的示例代码，可以帮助开发者快速理解和学习如何在iOS应用中集成和操作Google地图。 首先，Google Maps SDK for iOS是Google提供的一个库...

    google map v2 Demo

    这个"google map v2 Demo"是展示如何使用API V2创建一个简单的地图应用实例。在这个Demo中，重点是展示如何显示基本的地图视图。 首先，要使用Google Maps API V2，开发者需要在Google Developers Console上注册...

    谷歌地图Demo

    谷歌地图Demo是一个示例项目，它展示了如何在iOS或Android应用中有效地集成和利用谷歌地图API。这个Demo包含了几个关键功能的实现，如附近搜索、自定义AnnotationView以及路线规划，这些都是开发基于地理位置的应用...

    Android地图定位googleSDK使用

    总结来说，使用Android中的Google Maps SDK和Google Location SDK可以实现地图展示和定位功能。通过添加依赖、配置权限、初始化地图、创建FusedLocationProviderClient对象以及监听位置更新，我们可以实现基本的地图...

    google地图定位小Demo

    标题中的"google地图定位小Demo"表明我们要讨论的是关于Google Maps在iOS应用中实现定位功能的一个小型示例项目。在iOS开发中，Google Maps SDK提供了一系列API，允许开发者集成地图功能，包括显示地图、定位用户...

    Google_Map_API谷歌地图

    基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 ...Google 地图 API 概念 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图

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