Google API3 在地图上画圆圈，实现可拖动

最新推荐文章于 2023-03-29 19:00:00 发布
lyle2000w
最新推荐文章于 2023-03-29 19:00:00 发布
阅读量6.2k
点赞数 2
CC 4.0 BY-SA版权
分类专栏：地图文章标签： google api distance function null import
本文链接：https://blog.youkuaiyun.com/lyle2000w/article/details/6960105
地图专栏收录该内容
1 篇文章
订阅专栏
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>API3_DrawCircle</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" language="JavaScript">
var myMap = null; 

function displayMap(){
  var myOptions = {
      zoom: 14,
      center: new google.maps.LatLng(41.967044,-73.835253),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }; 
  myMap = new google.maps.Map(document.getElementById("map"),myOptions);
  

 google.maps.event.addListener(myMap, 'click', function(event) { 
  if (event) {
    //singleClick = !singleClick;
    //setTimeout("if (singleClick) createCircle(new google.maps.LatLng("+ event.latLng.lat() + ", " + event.latLng.lng() +"), 250);", 300);
    createCircle(new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()),450);
  }
  
 });
}

</script>

<style type="text/css">
  @import url("http://www.google.com/uds/css/gsearch.css");
  @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");

  div#GQueryControl {
    background-color: white;
    width: 155;
  }
</style>

</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 -->
<script>
  var metric = false;
  var singleClick = false;
  var infowindow = new google.maps.InfoWindow({
          content: ""
     });

function createCircle(point, radius) {
  singleClick = false;
  geoQuery = new GeoQuery();
  geoQuery.initializeCircle(radius, point, myMap); 
  geoQuery.render();
  
  alert(geoQuery._dragHandlePosition);
  alert(geoQuery._radius);
}

/**
 *
 * 算法:通过原点、角度和距离计算目标点的坐标
 * 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() {

}

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._polyline;
GeoQuery.prototype._color;
GeoQuery.prototype._control;
GeoQuery.prototype._points;
GeoQuery.prototype._dragHandlePosition;
GeoQuery.prototype._centerHandlePosition;

/**
 *
 * 圆的加载
 *
 */
GeoQuery.prototype.initializeCircle = function(radius, point, map) {
    this._type = this.CIRCLE;    //圆形 
    this._radius = radius;     //半径
    this._map = map;      //地图
 
 //计算扩大圆的点的位置
 var distance1 = this._radius/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,
        icon:"centerArrow.png"
    }); 
  
 //随机获取颜色
    this._color = this.COLORS[COLORI++ % 3];
 
 //在地图上加载圆形
    this._dragHandle.setMap(map);
    this._centerHandle.setMap(map);
 
    var myObject = this;
 //扩大圆的点的拖拽停止事件
 google.maps.event.addListener(myObject._dragHandle, 'dragend', function() {
  myObject.updateCircle(1);
  
  alert(myObject._dragHandlePosition);
  alert(myObject._radius);
 });
 //扩大圆的点的拖拽事件
 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);});
}

/**
 *
 * 圆的修改
 * type:1为扩大缩小点，其他为中心点
 *
 */
GeoQuery.prototype.updateCircle = function (type) {
 this._polyline.setMap(null);
    if (type==1) {
      this._dragHandlePosition = this._dragHandle.getPosition();
      this._radius = 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._points = [];
  
 //var dis = distance(this._points[0],this._points[1])/2;
 //var newPoint = destination(this._points[0],180,dis);
 
 
    var distance = this._radius/1000;
    
 for (i = 0; i < 72; i++) {
      this._points.push(destination(this._centerHandlePosition, i * 360/72, distance) );
    }
    this._points.push(destination(this._centerHandlePosition, 0, distance) );
  
 this._polyline = new google.maps.Polygon({
      paths: this._points,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    }); 
 this._polyline.setMap(this._map); 
  } 
}


/**
 *
 * 圆的删除
 *
 */
GeoQuery.prototype.remove = function() {
 this._polyline.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._points[0],this._points[1])/2;
 var newPoint = destination(this._points[0],180,dis);
 return newPoint; 
  //return this._points[(72/4)];
}

GeoQuery.prototype.getWest = function() {
  return this._points[(72/4*3)];
}


</script>
</body>
</html>