2015-07-06 74 views
0

我已經在地圖中心作爲半徑放置了一個標記(用#333填充顏色)。最初,標記的大小設置爲151px。 這裏是場景,如果用戶點擊縮小按鈕,標記的大小保持不變,但在地圖上捕獲的半徑更大。 如果用戶單擊放大按鈕,仍然標記的大小保持不變,但半徑被捕獲的將變小。 我之所以這麼做,是因爲我想知道當前人的位置(GPS)是否在他使用移動應用程序指定的特定半徑內。 我的問題是,如何在用戶縮小或放大後獲得標記的當前半徑?關於這個問題的任何想法?謝謝。如何在放大或縮小後獲取當前半徑

我的谷歌地圖API的腳本:

function initGoogleMap() { 
    console.info('initGoogleMap'); 
    var latitude = 10.314241194743438; 
    var longitude = 123.90536092883599; 
    var zoom = 17; 
    var latlng = new google.maps.LatLng(latitude, longitude); 
    var map_options = { 
    center: latlng, 
    zoom: zoom, 
    draggable: true, 
    zoomControl: true, 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), map_options); 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(latitude, longitude), 
    map: map, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     fillOpacity: 0.5, 
     fillColor: "#333", 
     strokeOpacity: 1.0, 
     strokeColor: '#CB0909', 
     strokeWeight: 0, 
     scale: 151 // in pixels 
    } 
    }); 

    console.info('init zoom level: ', zoom); 
    marker.bindTo('position', map, 'center'); 
} 

initGoogleMap(); 

看到問題的連接演示: https://jsfiddle.net/sudogem/kkpt9t07/3/

回答

1

如果你知道像素的圓的半徑就可以計算一個點的緯度和經度在圓周上使用.fromLatLngToDivPixel.fromDivPixelToLatLng,然後用它來計算以米爲單位的圓的半徑:

function computeRadius() { 
    if (!overlay) return; 
    var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition()); 
    var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y); 
    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint); 
    if (!edgeMarker || !edgeMarker.setPosition) { 
     edgeMarker = new google.maps.Marker({ 
      position: pixelLatLng, 
      map: map, 
     }); 
    } else { 
     edgeMarker.setPosition(pixelLatLng); 
    } 
    var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition()); 
    document.getElementById('info').innerHTML = "radius = " + (radius).toFixed(2) + " meters"; 
} 

updated fiddle

代碼片斷:

function computeRadius() { 
 
    if (!overlay) return; 
 
    var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition()); 
 
    var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y); 
 
    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint); 
 
    if (!edgeMarker || !edgeMarker.setPosition) { 
 
    edgeMarker = new google.maps.Marker({ 
 
     position: pixelLatLng, 
 
     map: map, 
 
    }); 
 
    } else { 
 
    edgeMarker.setPosition(pixelLatLng); 
 
    } 
 
    var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition()); 
 
    document.getElementById('info').innerHTML = "radius = " + (radius).toFixed(2) + " meters"; 
 
} 
 

 

 
var marker; 
 
var overlay; 
 
var edgeMarker; 
 
var map; 
 

 
function initGoogleMap() { 
 
    console.info('initGoogleMap'); 
 
    var latitude = 10.314241194743438; 
 
    var longitude = 123.90536092883599; 
 
    var zoom = 17; 
 
    var latlng = new google.maps.LatLng(latitude, longitude); 
 
    var map_options = { 
 
    center: latlng, 
 
    zoom: zoom, 
 
    draggable: true, 
 
    zoomControl: true, 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), map_options); 
 
    marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(latitude, longitude), 
 
    map: map, 
 
    icon: { 
 
     path: google.maps.SymbolPath.CIRCLE, 
 
     fillOpacity: 0.5, 
 
     fillColor: "#333", 
 
     strokeOpacity: 1.0, 
 
     strokeColor: '#CB0909', 
 
     strokeWeight: 0, 
 
     scale: 151 // in pixels 
 
    } 
 
    }); 
 
    overlay = new google.maps.OverlayView(); 
 
    overlay.draw = function() {}; 
 
    overlay.setMap(map); 
 

 
    google.maps.event.addListenerOnce(map, 'idle', computeRadius); 
 
    google.maps.event.addListener(map, 'center_changed', computeRadius); 
 
    google.maps.event.addListener(map, 'zoom_changed', computeRadius); 
 

 
    console.info('init zoom level: ', zoom); 
 
    marker.bindTo('position', map, 'center'); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initGoogleMap);
/* Google Map */ 
 

 
#map_canvas { 
 
    border: 1px solid #ccc; 
 
    margin-top: 5px; 
 
    width: 100%; 
 
    height: 400px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script> 
 
<div id="map_canvas"></div> 
 
<div id="info"></div>

相關問題