Resalte el resto de polígono y tinte del mapa con Google Maps

Me gustaría mostrar un polígono resaltado con Google Maps. La idea es que el polígono en cuestión se muestre normalmente y el resto del mapa se oscurezca un poco.Resalte el resto de polígono y tinte del mapa con Google Maps

Aquí es una imagen de ejemplo lo que me gustaría lograr con un polígono de Austria: alt text http://a.imagehost.org/0613/google_maps_tint_example.png

Por desgracia, soy un novato completa cuando se trata de Google Maps API de mapa y cosas en general.

Entonces, ¿esto es posible incluso con Google Map API? En caso afirmativo, ¿con qué versión (v2, v3)? ¿Sería más fácil hacerlo con otros toolkits de mapas, como openlayers?

PS: Una idea que tenía, era construir un polígono inversa (en este ejemplo, todo el mundo menos la forma de Austria) y luego mostrar una superposición de color negro con la transparencia usando este polígono invertida. Pero eso parece ser bastante complicado para mí.

Fuente

2010-06-02 Haes

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

Aquí hay algo de código para cambiar Google de Bermuda Triangle demo utilizar 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);

Fuente

2010-06-02 14:53:36 Mark

Gracias, eso es exactamente lo que estaba buscando. – Haes

Fuera de la caja, no funciona. Funciona cuando everythingElse es en el sentido de las agujas del reloj y triangleCoords está en sentido antihorario o viceversa: http://stackoverflow.com/questions/7494474/google-maps-api-polygon-with-hole-in-center –

Con respecto a:

el resto del mapa que se oscureció un poco.

Esto se puede hacer con Maps API v3 usando Styled Maps.

Incluso hay un Styled Maps Wizard donde puede jugar con la configuración, y luego presione Show JSON para hacer pasar la matriz como primer argumento al new google.maps.StyledMapType.

Para conseguir el efecto que desee simplemente reducir el Lightness por todo, en el asistente que querrá ver esto en el cuadro de Map Style a la derecha:

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

Qué va a exportar a:

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

Y look like this.

Fuente

2013-07-24 15:53:54 dukedave

USO 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);

encajona de archivo GeoJSON externa utilizar

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

nota: Google utiliza .json como la extensión de archivo y no GeoJSON.GeoJSON https://developers.google.com/maps/documentation/javascript/datalayer

crear su GeoJSON aquí
https://google-developers.appspot.com/maps/documentation/utils/geojson/

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

Fuente

2015-07-16 10:38:16

Resalte el resto de polígono y tinte del mapa con Google Maps

Respuesta

Cuestiones relacionadas