Google Haritalar

Question

kod aşağıda kullanarak google maps üzerinde 3 poligon alanları çizmek mümkün duyuyorum

,

var var_2 = [ 
    << latitude, longitudes>>.....    

    ]; 
    var boundary2 = new google.maps.Polygon({ 
     paths: var_2, 
     geodesic: true, 
     strokeColor: 'blue', 
     strokeOpacity: 0.2, 
     strokeWeight: 2, 
     fillColor: 'blue', 
     fillOpacity: 0.2 
    }); 
    boundary2.setMap(map); 
    boundary2.addListener('click', showArrays); 
    infoWindow = new google.maps.InfoWindow; 

    function showArrays(event) { 
     var vertices = this.getPath(); 
     var contentString = 'AREA_1'; 
     infoWindow.setContent(contentString); 
     infoWindow.setPosition(event.latLng); 
     infoWindow.open(map); 
    } 

Ama bütün 3 çokgenler aynı adı 'AREA_3' almak adlandırma çokgen. Lütfen bunu düzeltmeme yardım et.

-Teşekkürler

Answer 1

En basit çözüm:

function showArrays(event) { 
    var vertices = this.getPath(); 
    infoWindow.setContent(this.content); 
    infoWindow.setPosition(event.latLng); 
    infoWindow.open(map); 
} 

var boundary3 = new google.maps.Polygon({ 
    paths: var_3, 
    geodesic: true, 
    strokeColor: 'blue', 
    strokeOpacity: 0.2, 
    strokeWeight: 2, 
    fillColor: 'blue', 
    fillOpacity: 0.2, 
    content: "AREA_3" 
}); 
boundary3.setMap(map); 
boundary3.addListener('click', showArrays); 

: çokgenin özel özelliği olarak "içerik" add, o zaman this.content gibi tıklama dinleyici de erişebilirsiniz ( content varsayarak özel özellik olduğunu

proof of concept fiddle

kod parçacığı:

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(45.6, -40.4), 
 
     zoom: 3, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var var_1 = [ 
 
    new google.maps.LatLng(45.6, -40.4), 
 
    new google.maps.LatLng(40.0, -40.4), 
 
    new google.maps.LatLng(45.6, -35.0) 
 
    ] 
 
    var boundary1 = new google.maps.Polygon({ 
 
    paths: var_1, 
 
    geodesic: true, 
 
    strokeColor: 'blue', 
 
    strokeOpacity: 0.2, 
 
    strokeWeight: 2, 
 
    fillColor: 'blue', 
 
    fillOpacity: 0.2, 
 
    content: "AREA_1" 
 
    }); 
 
    boundary1.setMap(map); 
 
    boundary1.addListener('click', showArrays); 
 

 
    var var_2 = [ 
 
    new google.maps.LatLng(59.677361, -2.469846), 
 
    new google.maps.LatLng(59.299717, -6.314917), 
 
    new google.maps.LatLng(57.877247, -9.314917), 
 
    new google.maps.LatLng(54.428078, -11.638861), 
 
    new google.maps.LatLng(51.784554, -11.702241), 
 
    new google.maps.LatLng(50.185848, -10.054354), 
 
    new google.maps.LatLng(49.405380, -7.012100), 
 
    new google.maps.LatLng(49.090675, -3.272664), 
 
    new google.maps.LatLng(48.775970, -1.709283), 
 
    new google.maps.LatLng(49.757851, -2.089565), 
 
    new google.maps.LatLng(50.714554, 1.037195), 
 
    new google.maps.LatLng(51.482437, 2.304801), 
 
    new google.maps.LatLng(53.433609, 3.276632), 
 
    new google.maps.LatLng(55.863132, 3.445646) 
 

 
    ]; 
 
    var boundary2 = new google.maps.Polygon({ 
 
    paths: var_2, 
 
    geodesic: true, 
 
    strokeColor: 'blue', 
 
    strokeOpacity: 0.2, 
 
    strokeWeight: 2, 
 
    fillColor: 'blue', 
 
    fillOpacity: 0.2, 
 
    content: "AREA_2" 
 
    }); 
 
    boundary2.setMap(map); 
 
    boundary2.addListener('click', showArrays); 
 
    var var_3 = [ 
 
    new google.maps.LatLng(25.774252, -80.190262), 
 
    new google.maps.LatLng(18.466465, -66.118292), 
 
    new google.maps.LatLng(32.321384, -64.757370), 
 
    new google.maps.LatLng(25.774252, -80.190262) 
 
    ]; 
 
    var boundary3 = new google.maps.Polygon({ 
 
    paths: var_3, 
 
    geodesic: true, 
 
    strokeColor: 'blue', 
 
    strokeOpacity: 0.2, 
 
    strokeWeight: 2, 
 
    fillColor: 'blue', 
 
    fillOpacity: 0.2, 
 
    content: "AREA_3" 
 
    }); 
 
    boundary3.setMap(map); 
 
    boundary3.addListener('click', showArrays); 
 

 
    infoWindow = new google.maps.InfoWindow; 
 

 
    function showArrays(event) { 
 
    var vertices = this.getPath(); 
 
    infoWindow.setContent(this.content); 
 
    infoWindow.setPosition(event.latLng); 
 
    infoWindow.open(map); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>