当前位置: 代码迷 >> Web前端 >> Draw rect and round with google 地图
  详细解决方案

Draw rect and round with google 地图

热度:624   发布时间:2012-11-01 11:11:31.0
Draw rect and round with google map

The topic is to dicuss how to draw rect and round?under google map java-script.?As we know, there are many resource about the two items. But``` it seems that most of them are written by google map v2. So we do?this job with google map v3 as follow:

1. Drawing rect:
(1) Rule: It is simple to follow the sample "Bermuda Triangle", which is from google map v3 guide: http://code.google.com/intl/zh-CN/apis/maps/documentation/v3/overlays.html#Polygons

(2) Our sample source:

var rectRegion;
// parameter: rect cornerA(base pos): lng1/lat1; cornerB(mouse pos): lng2/lat2
// type: 0x00: refresh(default); 0x01: add rect and set center of map
function drawSingleRect(lng1, lat1, lng2, lat2, type) {
?if(type == 0) {
??if(rectRegion)
???rectRegion.setMap(null);?
?}
?else if(type == 1) {
??latlng = new google.maps.LatLng(lat1, lng1);
??map.setZoom(16);
??map.setCenter(latlng);
?}

?var rectCoords = [
??new google.maps.LatLng(lat1, lng1),
??new google.maps.LatLng(lat1, lng2),
??new google.maps.LatLng(lat2, lng2),
??new google.maps.LatLng(lat2, lng1),
??new google.maps.LatLng(lat1, lng1)
?];

?rectRegion = new google.maps.Polygon({
??paths: rectCoords,
??strokeColor: "#FF0000",
??strokeOpacity: 0.8,
??strokeWeight: 2,
??fillColor: "#FF0000",
??fillOpacity: 0.35
?});

?rectRegion.setMap(map);
}

(3) Realizing:

sample1.jpg

2. Drawing circle:
(1) Rule:
The round is polyron also. If we calc enough points at the circle, then we can build the "circle" polyron. And we found the math rule with center lng/lat and radius from: http://maps.forum.nu/gm_sensitive_circle2.html ,?whose author is Marcelo Montagna. At fact, Marcelo's code run some slowly because of many sin/cos/atan and so on? Then we do little modification for quick it.
The other item is how to read the?radius between two marker. The excellent job we found is from: http://www.barattalo.it/2009/12/19/ruler-for-google-maps-v3-to-measure-distance-on-map/ , the author is Giulio Pons. With Giulio's source we built a ruler also.

(2) Our sample Source:
Like the drawing rect, we simulate the paths parameter of polygon, which is the marker array calced by Marcelo's rule, then do setMap(). Everything seems ok.

var roundRegion;
// parameter: center pos: lng1/lat1; mouse pos: lng2/lat2
// type: 0x00: refresh(default); 0x01: add round and set center of map
function drawSingleRound(lng1, lat1, lng2, lat2, type) {

?radius = distance(lat1, lng1, lat2, lng2);?// unit: m
?drawSingleRoundwithRadius(lng1, lat1, radius, type);
}

function drawSingleRoundwithRadius(lng1, lat1, radius, type) {
?if(type == 0) {
??if(roundRegion)
???roundRegion.setMap(null);?
?}
?else if(type == 1) {
??latlng = new google.maps.LatLng(lat1, lng1);
??map.setZoom(16);
??map.setCenter(latlng);
?}
?
?var d = radius/6378800;
?var roundCoords = [];

?var bequick1 = Math.PI/180;
?var bequick2 = 180/Math.PI;
?lat1 = bequick1* lat1;
?lng1 = bequick1* lng1;
?var bequick3 = Math.sin(lat1);
?var bequick4 = Math.cos(lat1);
?var bequick5 = Math.sin(d);
?var bequick6 = Math.cos(d);
?for (var a = 0 ; a < 361 ; a++) {
??var tc = bequick1*a;
??var y = Math.asin(bequick3*bequick6+bequick4*bequick5*Math.cos(tc));
??var dlng = Math.atan2(Math.sin(tc)*bequick5*bequick4, bequick6-bequick3*Math.sin(y));
??var x = ((lng1-dlng+Math.PI) % (2*Math.PI)) - Math.PI ; // MOD function
??var point = new google.maps.LatLng(parseFloat(y*bequick2), parseFloat(x*bequick2));
??roundCoords.push(point);
?}

?roundRegion = new google.maps.Polygon({
??paths: roundCoords,
??strokeColor: "#FF0000",
??strokeOpacity: 0.8,
??strokeWeight: 2,
??fillColor: "#FF0000",
??fillOpacity: 0.35
?});

?roundRegion.setMap(map);
}

// return delta with unit meter
function distance(lat1,lon1,lat2,lon2) {
?var R = 6371; // km (change this constant to get miles)
?var dLat = (lat2-lat1) * Math.PI / 180;
?var dLon = (lon2-lon1) * Math.PI / 180;
?var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
??Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
??Math.sin(dLon/2) * Math.sin(dLon/2);
?var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
?var d = R * c;
?//if (d>1) return Math.round(d)+"km";
?//else if (d<=1) return Math.round(d*1000)+"m";
?if (d>1) return Math.round(d)*1000;
?else if (d<=1) return Math.round(d*1000);
?//return d;
}

(3) Realizing:

sample2.jpg
  相关解决方案