谷歌地圖：動態可移動和可調整大小的圈覆蓋的腳本V3

好吧，我才發現我一直在尋找完美的劇本。谷歌地圖：動態可移動和可調整大小的圈覆蓋的腳本V3

http://web3o.blogspot.com.br/2010/05/google-maps-dynamically-movable-and.html

你可以用緯度/長，半徑在谷歌地圖新增的圈子。問題是，這個腳本它的只適用於v2 api。

我發現這是太 http://www.mapdevelopers.com/draw-circle-tool.php

但是沒有代碼或源可以用它:(

有誰知道像這樣的任何腳本，可以在V3工作？

謝謝

來源

2013-07-12 saulob

該功能內置於Google Maps API v3 Drawing Library

Example

您可以自定義的，只允許界（或只允許一個圓圈）。

Working example

代碼片斷：

function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(-34.397, 150.644), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.CIRCLE, 
 
    drawingControl: false, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: [ 
 
     google.maps.drawing.OverlayType.CIRCLE 
 
     ] 
 
    }, 
 
    circleOptions: { 
 
     fillColor: '#ffff00', 
 
     fillOpacity: 1, 
 
     strokeWeight: 5, 
 
     clickable: false, 
 
     editable: true, 
 
     zIndex: 1 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
 
    // Switch back to non-drawing mode after drawing a shape. 
 
    drawingManager.setDrawingMode(null); 
 
    }); 
 

 
} 
 

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

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map-canvas, 
 
#map_canvas { 
 
    height: 100%; 
 
} 
 
@media print { 
 
    html, 
 
    body { 
 
    height: auto; 
 
    } 
 
    #map-canvas, 
 
    #map_canvas { 
 
    height: 650px; 
 
    } 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script> 
 
<div id="map-canvas"></div>

來源

2013-07-12 19:31:06 geocodezip

謝謝:)，讓它像你說的那樣使用內置函數工作。 – saulob

function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(-34.397, 150.644), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.CIRCLE, 
 
    drawingControl: false, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: [ 
 
     google.maps.drawing.OverlayType.CIRCLE 
 
     ] 
 
    }, 
 
    circleOptions: { 
 
     fillColor: '#ffff00', 
 
     fillOpacity: 1, 
 
     strokeWeight: 5, 
 
     clickable: false, 
 
     editable: true, 
 
     zIndex: 1 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
 
    // Switch back to non-drawing mode after drawing a shape. 
 
    drawingManager.setDrawingMode(null); 
 
    }); 
 

 
} 
 

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

html, 
 
body { 
 
    height: 100%; 
 

 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map-canvas, 
 
#map_canvas { 
 
    height: 100%; 
 
} 
 
@media print { 
 
    html, 
 
    body { 
 
    height: auto; 
 
    } 
 
    #map-canvas, 
 
    #map_canvas { 
 
    height: 650px; 
 
    } 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script> 
 
<div id="map-canvas"></div>

來源

2016-09-20 05:13:00

谷歌地圖：動態可移動和可調整大小的圈覆蓋的腳本V3

回答

相關問題