JavaScript para medir la distancia en Google Maps-Google Maps Ruler

Vista prévia

Descripción

Google Maps Ruler es una biblioteca JavaScript ligera y compatible con UMD que permite a los usuarios dibujar una línea en un mapa y medir la distancia entre dos o más puntos mediante la API de la biblioteca JavaScript de Google Maps.

Funcionamiento

Cargue Google Maps JS API junto con el Google-Maps-Ruler. CSS y Google-Maps-Ruler. js en la página HTML.

<link href="google-maps-ruler.css" rel="stylesheet">
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="dist/google-maps-ruler.js"></script>

Cree un contenedor para colocar el mapa de Google.

<div id="example">
</div>

Inserte un mapa de Google en el contenedor y active la regla.

function initialize() {

var mapOptions = {


center: { lat: 34.0522342, lng: -118.2436849},


zoom: 8

};

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

gmruler.init(map);

gmruler.add('default', {


distanceUnit: 'mile'

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

Eso es todo. Haga clic con el botón derecho para agregar un nuevo punto. Haga doble clic en un punto para eliminarlo. Arrastre la etiqueta de punto para cambiar su posición.

Opciones disponibles.

gmruler.add('myruler', {


// Unit for distance, can be mile or km

distanceUnit: 'mile',


// Color of the polyline connecting points

strokeColor: '#ff0000',


// Weight of the polyline connecting points

strokeWeight: 2


})