Google地图API使用demo

最新推荐文章于 2018-07-17 09:29:01 发布
最新推荐文章于 2018-07-17 09:29:01 发布
阅读量325 收藏
点赞数
分类专栏： HTML Javascript 文章标签： google map 谷歌地图API
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5974/article/details/82341847
版权 


<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>

iteye_5974
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
google地图API实现的一个简单demo
04-01
google地图API实现的一个简单demo
openlayers加载谷歌地图（在线demo）
最新发布
shanfuchai的专栏
12-10 1441
谷歌地图 openlayers gac-geo.googlecnapps.cn
谷歌地图简单示例
weixin_34303897的博客
11-30 127
2019独角兽企业重金招聘Python工程师标准>>> ...
谷歌地图demo
不懂love的博客
10-25 680
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">var myCenter=new google.maps.LatLng(23.113145,113.417302);function initialize(){var mapProp = {  c
谷歌地图 demo
11-15
谷歌地图使用的基础 demo 可快速掌握 基本API的使用
Android google地图api Demo
03-20
在这个名为"Android google地图api Demo"的项目中，我们将深入探讨如何使用Google Maps API在Android应用上实现一个简单的地图展示示例。 首先，我们需要在Google Cloud Console上注册一个新的项目，并启用Google ...
google-map-api-demo:使用Google的Map API创建地图
03-18
在本项目"google-map-api-demo"中，我们将深入探讨如何使用Google Maps JavaScript API来创建交互式地图。这个API是Google提供的一种强大工具，允许开发者在网页上集成动态、功能丰富的地图，包括地理位置标记、路线...
google-map-api-demo
02-16
"google-map-api-demo"是一个基于JavaScript的项目，主要展示了如何使用Google Maps API创建交互式的地图应用。这个项目可能是一个简单的示例，用于教学或者实践如何将Google Maps API集成到网页中，提供地图显示、...
[js]谷歌地图api和百度地图api的demo..
wendellup的专栏
01-09 1万+
用谷歌地图和百度地图做了类似于地铁上给定出发点和目的点和当前所在位置的 效果。。由于谷歌地图api在国内被封的厉害，且每天调用超过25000次就要收费 估计一般公司都会采用百度地图api 1.先来谷歌的。 我用的版本是google map api v3。 由于谷歌地图在国内被禁的厉害，推荐使用goagent来解决吧。 代码及效果图如下。 Google
GoogleMap谷歌地图demo
01-09
GoogleMap谷歌地图demo，调用GoogleMap api 实现的功能全面的地图工具
Google Maps API Android and Javascript Demo
09-17
Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.
最全的GoogleMapDemo使用方法和错误纠正
09-21
最全的GoogleMapDemo使用方法和错误纠正 里面含有各种常见的错误和详细的操作步骤，以及可用的Demo，欢迎大家共同分享资源
我收集的谷歌地图API实例
12-18
我收集的谷歌地图API实例 我收集的谷歌地图API实例 我收集的谷歌地图API实例 我收集的谷歌地图API实例
google地图demo
fangyong2006的专栏
04-09 196
--------------------------------------------准备工作----------------------------------------- 官网文档地址:https://developers.google.com/maps/documentation/android/ 按照文档申请API_KEY，安装Google Play services --...
谷歌地图 官网 详细API
wei3181658的博客
07-17 8041
https://developers.google.cn/maps/documentation/javascript/reference/3/#OverlayType 以上网址可在国内访问，但是是英文版的，里面有详细的API说明
集成GoogleMap,实现定位和获取位置信息
热门推荐
linyaodai的博客
02-17 3万+
自学android几个月,前几天粗略学习了下google地图集成,特地记录该文 1.准备 我使用的是AS2.2.2,首先翻墙注册google开发者帐号,准备获取API Key,网上有许多相关资料我就不再赘述,这里讲一个比较小白级的获取方法,可以减少许多输入 1.1. AS创建项目添加一个Google Map Activity 1.2 创建成功后找到google_maps_a
jQuery serializeArray() 方法无效, 不起作用, 得不到数组
iteye_5974的博客
05-10 1071
[b]jQuery.serializeArray() 方法无效, 不起作用, 得不到数组[/b] 其中一种比较诡异的情况是: [code="html"] [/code] [size=large][color=red][b]当checkbox没有name属性值, jquery的serializeArray方法会忽略这个input[/b][/color][/size]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值