谷歌地圖V3中的範圍環

我有一個很長時間以前寫過的腳本，而不是我從V2更新到V3的腳本，我試圖從中心LatLng點繪製範圍環。這工作在V2中，但它不在V3中工作，我不知道爲什麼，因爲我知道一些代碼已折舊，但不知道它需要替換什麼。谷歌地圖V3中的範圍環

//Function to draw circles 
function doDrawCircle(circleUnits, center, circleRadius, liColor, liWidth, liOpa, fillColor, fillOpa, opts, radials){ 
    var bounds = new google.maps.LatLngBounds(); 
    var circlePoints = Array(); 
    with (Math) { 
     if (circleUnits == 'KM') { 
      var d = circleRadius/6378.8; // radians 
     } 
     else { //miles 
      var d = circleRadius/3963.189; // radians 
     } 
     var lat1 = (PI/180)* center.lat(); // radians 
     var lng1 = (PI/180)* center.lng(); // radians 
     for (var a = 0 ; a < 361 ; a++) { 
      var tc = (PI/180)*a; 
      var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc)); 
      var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y)); 
      var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function 
      var point = new google.maps.LatLng(parseFloat(y*(180/PI)),parseFloat(x*(180/PI))); 
      circlePoints.push(point); 
      bounds.extend(point); 
      if(a==0){ 
       var offset = new google.maps.Size(-5,0);             // Added the offset - mile markers look a bit better 
       var label = new ELabel(point, circleRadius, "style1", offset, 40); 
       map.addOverlay(label); 

      } 
      if (((a==0) || (a==45) || (a==90) || (a==135) || (a==180) || (a==225) || (a==270) || (a==315)) && radials) { 
      //if (((a==0) || (a==45) || (a==90) || (a==135) || (a==180)) && radials) { 
       var pline = new google.maps.Polyline([center,point] , liColor, liWidth, liOpa); 
       map.addOverlay(pline); 
      } 
     } 
     var poly = new google.maps.Polygon(circlePoints, liColor, liWidth, liOpa, fillColor, fillOpa, opts); 
     map.addOverlay(poly);       // Add a target circle to the map 
     map.setZoom(map.getBoundsZoomLevel(bounds)); // This sets the map bounds to be as big as the target circles, comment out if you don't want it 

    } 

}

然後我在initialize()函數內有這個映射。

// You can add circles, or change other parameters 
      // radials should be set to true for the maximum distance if you want radials 
      // doDrawCircle(circleUnits, center, circleRadius, lineColor, lineWidth, lineOpacity, fillColor, fillOpacity, opts, radials) 
      doDrawCircle('MI',llCenter, 62, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false); 
      doDrawCircle('MI',llCenter, 124, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false); 
      doDrawCircle('MI',llCenter, 187, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false); 
      doDrawCircle('MI',llCenter, 249, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false); 
      doDrawCircle('MI',llCenter, 312, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false); 
      doDrawCircle('MI',llCenter, 374, lcolor, 1, .7, "#FFFF00", 0, { clickable: false }, false); 
//   doDrawCircle('MI',llCenter, 374, lcolor, 1, .7, '#00FF00', 0, { clickable: false }, true); // This would add the radials

這就是它想象的樣子。這是來自工作的V2地圖。

V2 EXAMPLE

鏈接到完整的代碼

FULL MAP CODE

來源

2013-07-05 Texan78

你需要做的第一件事就是讓elabel.js的最新版本的谷歌地圖V3這裏：

https://github.com/erunyon/ELabel/blob/master/elabel.js

然後，好消息是你不需要所有複雜的數學和s你在doDrawCircle函數中進行的凝灰岩。您現在可以使用google.maps.Circle以及必須通過google maps腳本標記的url參數使用'libraries = geometry'參數包含的幾何庫，以便我們可以通過google獲取文本標籤的放置位置起點.maps.geometry.spherical.computeOffset。然後，我在下面的文本位置中加入了一點點修飾，看起來更整齊一些。測試用例：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Circles</title> 
<style type="text/css"> 
.style1 { 
    /* used for range numbers on rings */ 
    color: #FFF; 
    font-size: 10px; 
    text-shadow: 2px 2px 2px #000; 
    font-weight: bold; 
    font-family: verdana, helvetica, arial, sans-serif; 
    background-color:black; 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script> 
<!-- elabel.js for google maps V3 from here: https://github.com/erunyon/ELabel/blob/master/elabel.js --> 
<script src="elabel.js"></script> 
<script> 

function initialize() { 
    var i, meters, options, labelLocation, textLength, textXcenter, label, 
     //note I declared the actual font pixel size in .style1 css rule 
     //just to help with visualizing the way I'm positioning the label texts 
     textPixelSize = 10, 
     //will need to invert textYcenter as well as textXcenter to negative numbers later 
     textYcenter = (textPixelSize/2) + 2, //2px tweak for 'y' position, approximation 
     mapOptions = { 
      zoom: 6, 
      center: new google.maps.LatLng(32.8297,-96.6486), 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }, 
     ranges = [62, 124, 187, 249, 312, 374], //circle radii in miles 
     circles = [], 
     labels = [], 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    for (i = 0; i < ranges.length; i++) { 
     //convert miles to meters: 
     meters = ranges[i]/0.00062137; 
     options = { 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 1, 
      fillOpacity: 0, 
      map: map, 
      center: mapOptions.center, 
      radius: meters 
     }; 
     circles.push(new google.maps.Circle(options));//ta-da! easy circles in V3 
     //labelLocation will be a google.maps.LatLng object 
     labelLocation = google.maps.geometry.spherical.computeOffset(mapOptions.center, meters, 0); 
     textLength = (''+ranges[i]).length; 
     textXcenter = (textLength * textPixelSize)/2; //approximation 
     label = new ELabel({ 
      latlng: labelLocation, 
      label: ranges[i], 
      classname: 'style1', 
      offset: new google.maps.Size(-textXcenter, -textYcenter),//negative will move left and up 
      opacity: 100, 
      overlap: true, 
      clicktarget: false 
     }); 
     label.setMap(map); 
     labels.push(label); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div id="map_canvas" style="width:780px; height:600px; margin:10px auto;"></div> 
</body> 
</html>

編輯：下面是修改後的版本，它允許通過「範圍」按鈕來切換環的知名度。也刪除了所有的文本標籤定位調整數學，並替換爲使用不同長度文本的樣式類（如果需要，可以更容易地在樣式中使用em單位）。添加了LabelCircle構造函數，以便更容易地封裝並同時控制圓圈&標籤。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Circles</title> 
<style type="text/css"> 
.style1 { 
    /*used for range numbers on rings*/ 
    color: #FFF; 
    font-size: .6em; 
    text-shadow: 2px 2px 2px #000; 
    font-weight: bold; 
    font-family: verdana, helvetica, arial, sans-serif; 
    background-color:black; 
    margin-top: -0.5em; 
} 
.d2 { /*two-digit numbers on rings*/ 
    margin-left: -1em; 
} 
.d3 { /*three-digit numbers on rings*/ 
    margin-left: -1.5em; 
} 
/*direct copy of your existing .button style rule*/ 
.button{ 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    text-align: center; 
    position: relative; 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
     font-weight:bold; 
    box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px; 
    color: #000; 
    border: 1px solid #717B87; 
    background-color: #fff; 
    margin: 5px; 
    padding: 1px 6px; 
    overflow: hidden; 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script> 
<!-- elabel.js for google maps V3 from here: https://github.com/erunyon/ELabel/blob/master/elabel.js --> 
<script src="elabel.js"></script> 
<script> 

function LabelCircle(options) { 
    this.circle = new google.maps.Circle(options.circleOptions); 
    this.label = new ELabel(options.labelOptions); 
    this.label.setMap(options.circleOptions.map); 
    this.isVisible = true; 
} 

LabelCircle.prototype.setVisible = function (bool) { 
    var method = (bool) ? 'show' : 'hide'; 
    this.circle.setVisible(bool); 
    this.label[method](); 
    this.isVisible = bool; 
}; 

//a direct copy of your existing function 
function buttonControl(options) { 
    var control = document.createElement('DIV'); 
    control.innerHTML = options.name; 
    control.className = 'button'; 
    control.index = 1; 
    // Add the control to the map 
    options.gmap.controls[options.position].push(control); 
    google.maps.event.addDomListener(control, 'click', options.action); 
    return control; 
} 

function initialize() { 
    var i, meters, options, labelLocation, textLength, label, 
     mapOptions = { 
      zoom: 6, 
      center: new google.maps.LatLng(32.8297,-96.6486), 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }, 
     ranges = [62, 124, 187, 249, 312, 374], //circle radii in miles 
     labelCircles = [], 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    for (i = 0; i < ranges.length; i++) { 
     //convert miles to meters: 
     meters = ranges[i]/0.00062137; 
     //labelLocation will be a google.maps.LatLng object 
     labelLocation = google.maps.geometry.spherical.computeOffset(mapOptions.center, meters, 0); 
     //we'll use textLength below to add a class to the label 
     textLength = (''+ranges[i]).length; 
     options = { 
      circleOptions: { 
       strokeColor: '#FF0000', 
       strokeOpacity: 0.8, 
       strokeWeight: 1, 
       fillColor: 'transparent', 
       fillOpacity: 0, 
       map: map, 
       center: mapOptions.center, 
       radius: meters 
      }, 
      labelOptions: { 
       latlng: labelLocation, 
       label: ranges[i], 
       classname: 'style1 d' + textLength, 
       //offset: //no longer needed, using style classes 
       opacity: 100, 
       overlap: true, 
       clicktarget: false 
      } 
     }; 
     labelCircles.push(new LabelCircle(options)); 
    } 
    var rangeOptions = { 
     gmap: map, 
     name: 'Range', 
     position: google.maps.ControlPosition.TOP_RIGHT, 
     action: function(){ 
      for (var tmp, i = 0; i < labelCircles.length; i++) { 
       tmp = labelCircles[i]; 
       tmp.setVisible(!tmp.isVisible); 
      } 
     } 
    }; 
    var rangeButton = buttonControl(rangeOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div id="map_canvas" style="width:780px; height:600px; margin:10px auto;"></div> 
</body> 
</html>

來源

2013-07-06 14:12:08 astupidname

是的，謝謝你，那很完美！只是一些小的調整。我有一個在本頁頂部的範圍的var設置註釋[NSGMap.js]（http://www.mesquiteweather.net/gmap/nsgmap.js），但我很難分配給'ranges = [75,125,175,225,275,325]，//以英里爲單位的圓半徑'我所嘗試過的所有東西都會去除圓環並只顯示左上角的英里數。什麼是應用這個的正確方法。此外，我會用什麼var來定義我的按鈕的圓圈。這裏是地圖[V3 MAP]（http://www.mesquiteweather.net/wxgmap_lightning.php）謝謝！ – Texan78

我剛剛檢查了你的V3地圖，看起來你的圈子和標籤工作正常。你問：「我用什麼var來定義我的按鈕的圓圈」。不確定你的意思，但我猜你想切換他們的知名度？現在沒有時間，可能會在幾個小時後發佈小提琴，但請記住，每個標籤都有一個show（）和一個hide（）方法，並且每個圓都有一個setVisible（/ *）這裏真或假的方法也是如此。我想如果我要操縱，我可能會創建一個LabelCircle構造函數。稍後.... – astupidname

注意以上第二個版本的增加 – astupidname

谷歌地圖V3中的範圍環

回答

相關問題