web-dev-qa-db-ja.com

jQueryを使用してGoogleマップ上の2つのポイント間に線を引きますか？

JQueryまたはJavascriptを使用してGoogleマップAPIで2つのポイント（緯度と経度）の間に線を引く方法は？ 2点間の最短経路が必要です。どのタイプの回線でもかまいません。

javascriptjquerygoogle-mapsgoogle-maps-api-3
17
Vikas

API v2のみ！

次のコードスニペットは、2つのポイント間に幅10ピクセルの赤いポリラインを作成します。

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)],
  "#ff0000", 10);
map.addOverlay(polyline);

ドキュメントここを見つけることができます。

5
Gurpreet Singh

これは、API v3で線を描画する方法です。

var line = new google.maps.Polyline({
    path: [
        new google.maps.LatLng(37.4419, -122.1419), 
        new google.maps.LatLng(37.4519, -122.1519)
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    map: map
});

これは、2つのポイント間に直線を描くだけです。 最短パスにする場合は、地球が湾曲しているという事実を考慮し、測地線を描画する必要があります。そのためには、Google Maps APIでgeometryライブラリを使用する必要があります。このオプションのlibrariesパラメータを追加します。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

そして、ポリラインのオプションにgeodesic: trueを追加するだけです：

var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    geodesic: true,
    map: map
});
61
duncan

これにより、2つの点の間、およびそれを超えて線が引かれます。検索ボックスに新しい場所を入力し続けるだけで、最新の2つのポイント間のポイントをプロットし続けます。

こちらの作業例を参照

HTML：

<div id="inputDiv">
    <input id="startvalue" type="text" width="90" value="" autofocus placeholder="Keep Adding Places and searching...">
</div>
<div id="map"></div>
<div id="results"></div>

JS：

var geocoder;
var map;
var location1;
var location2;

$(document).ready(function(){
    initialize();    
    $("#startvalue").on('keydown',function(event){
        if (event.keyCode == 13 ) {
            createLine();
            $(this).val("");
            $(this).focus();
        }
    });

})

function initialize(){
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(7.5653, 80.4303);
    var mapOptions = {
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    setZoom();

    var input = /** @type {HTMLInputElement} */(
    document.getElementById('startvalue'));

    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

}

var address;
var address2;
function createLine(){

    if (address){
        address2 = document.getElementById('startvalue').value;     
    } else {
        address = document.getElementById('startvalue').value;     
    }

    var temp, temp2;

    geocoder.geocode({ 'address': address }, function (results, status) {
        // if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
        temp = results[0].geometry.location;
        if (address2){
            geocoder.geocode({ 'address': address2 }, function (results, status) {
                // if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
                temp2 = results[0].geometry.location;
                document.getElementById('results').innerHTML += temp2.toUrlValue()+"<br>";

                var route = [
                    temp,
                    temp2
                ];

                var polyline = new google.maps.Polyline({
                    path: route,
                    strokeColor: "#FF5E56",
                    strokeOpacity: 0.6,
                    strokeWeight: 5
                });
                location1 = convertLocationToLatLong(temp.toUrlValue())
                location2 = convertLocationToLatLong(temp2.toUrlValue())



                var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
                document.getElementById('results').innerHTML += "Polyline is "+lengthInMeters+" meters long<br>";

                polyline.setMap(map);
                plotMap(location1,location2);
            });   
            address = address2;          
        } else {
            location1 = convertLocationToLatLong(temp.toUrlValue());
            plotMap(location1);
        }
    });
}

function convertLocationToLatLong(location){
    var location = location.split(',').map(function(item) {
        return parseFloat(item);
    });
    return location
}

function plotMap(location1,location2){
    var location1 = new google.maps.LatLng(location1[0],location1[1]);
    if (location2){
        var location2 = new google.maps.LatLng(location2[0],location2[1]);      
    }
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(location1);
    if(location2){
        bounds.extend(location2);    
    }
    map.fitBounds(bounds);       
    setZoom();
}

function setZoom(){
    google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
            google.maps.event.removeListener(zoomChangeBoundsListener);
        });
    });
    map.initialZoom = true;
}

CSS：

#map {
    margin: 0;
    padding: 0;
    height: 400px;
    margin-top:30px;
   width:100%;
}

#inputDiv{
    position:absolute;
    top:0;
}

#startvalue{
  width:300px;
  padding:8px;
}
1
maudulus