javascript - example - Resalte el polígono y el tinte del mapa utilizando Google Maps

javascript marker google map

Question

Me gustaría mostrar un polígono resaltado utilizando Google Maps. La idea es que el polígono en cuestión se mostraría normalmente y el resto del mapa debería oscurecerse un poco.

Aquí hay una imagen de ejemplo que me gustaría lograr con un polígono de Austria: texto alternativo http://a.imagehost.org/0613/google_maps_tint_example.png

Desafortunadamente, soy un novato completo en lo que respecta a la API de Google Maps y al mapa en general.

Entonces, ¿es esto posible hacer esto con las API de Google Map? Si es así, ¿con qué versión (v2, v3)? ¿Sería más fácil hacerlo con otros kits de herramientas de mapas, como los openlayers?

PD: una idea que tuve fue construir un polígono inverso (en este ejemplo, todo el mundo sin la forma de Austria) y luego mostrar una superposición de color negro con transparencia utilizando este polígono invertido. Pero eso me parece bastante complicado.

Answer 1

Con respecto a:

El resto del mapa debería oscurecerse un poco.

Esto se puede hacer con Maps API v3 usando mapas con estilo .

Incluso hay un Asistente de mapas con estilo donde puedes jugar con la configuración y luego presionar Show JSON para que la matriz pase como primer argumento para el new google.maps.StyledMapType .

Para obtener el efecto que desea, simplemente reduzca la Lightness para todo, en el asistente querrá ver esto en el cuadro Map Style a la derecha:

Feature type:   all
Element type:   all
Lightness:  -70

Que se exportará a:

[
  {
     "stylers": [
      { "lightness": -70 }
    ]
  }
]

Y lucir así .

Answer 2

Google Maps API v3 te permite dibujar polygons con agujeros. Aquí está el ejemplo del Pentagon de Google. Es mucho más fácil que tratar de invertir un polígono. Básicamente, cree coordenadas para un polígono gigante que sea más grande de lo que nunca necesitaría. Ese siempre será el primer polígono en tu matriz de polígonos. El área que está resaltando siempre será el segundo polígono.

Aquí hay un código para cambiar la demo del Triángulo de las Bermudas de Google para usar un polígono con un agujero:

  var everythingElse = [
    new google.maps.LatLng(0, -90),
    new google.maps.LatLng(0, 90),
    new google.maps.LatLng(90, -90),
    new google.maps.LatLng(90, 90),
  ];



  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];




  bermudaTriangle = new google.maps.Polygon({
    paths: [everythingElse, triangleCoords],
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#000000",
    fillOpacity: 0.5
  });

  bermudaTriangle.setMap(map);

Answer 3

USANDO GEOJSON

<div id="googleMap" style="width:500px;height:380px;"></div>

 // define map properties
    var mapProp = {
        center: new google.maps.LatLng(23.075984, 78.877656),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
//create google map 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

// define geojson
    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [0, 90],
                        [180, 90],
                        [180, -90],
                        [0, -90],
                        [-180, -90],
                        [-180, 0],
                        [-180, 90],
                        [0, 90]
                    ],
                    [
                        [79.56298828125, 25.18505888358067],
                        [76.53076171875, 21.37124437061832],
                        [83.38623046875, 21.24842223562701],
                        [79.56298828125, 25.18505888358067]
                    ]
                ]
            },
            "properties": {}
        }]
    };
//add geojson to map
    map.data.addGeoJson(geojson);

en caso de uso externo de archivos geojson

map.data.loadGeoJson(''url-to-geojson-file'');

nota: Google usó .json como extensión para el archivo geojson y no .geojson https://developers.google.com/maps/documentation/javascript/datalayer

crea tu geojson aqui
https://google-developers.appspot.com/maps/documentation/utils/geojson/

Ejemplo de trabajo https://jsfiddle.net/841emtey/5/