Google Maps cómo mostrar el contorno de una ciudad o un área
Cómo mostrar los lugares o el contorno del área tal como lo hacen los siguientes sitios: [Entro en un área y muestra la frontera clara para esa área.]
He buscado durante horas en los documentos de mapas oficiales y no había ni idea de cómo estos sitios web están mostrando los bordes del área. También miró algunas viejas preguntas y leyó su no posible entonces.
5 answers
De lo que busqué, en este momento no hay ninguna opción de Google en la API de Mapas v3 y hay un problema en la API de Google Maps que se remonta a 2008. Hay algunas preguntas más antiguas - Agregue el esquema de "Área de búsqueda" en el resultado de google maps , Google ha comenzado a resaltar las áreas de búsqueda en color rosa. ¿Esta función está disponible en la API 3 de Google Maps? y usted puede encontrar algunas respuestas más nuevas aquí con información actualizada, pero esto no es un función.
Lo que puedes hacer es dibujar formas en tu mapa - pero para esto necesitas tener las coordenadas de los bordes de tu región.
Ahora, para obtener los límites del área administrativa, tendrá que hacer un poco de trabajo: http://www.gadm.org/country (si tienes suerte y hay suficiente nivel de detalle disponible allí).
En este sitio web se puede descargar localmente un archivo (hay muchos formatos disponibles) con el .extensión kmz. Descomprímelo y tendrás una .archivo kml que contiene la mayoría de las áreas administrativas (ciudades, pueblos).
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Schema name="x" id="x">
<SimpleField name="ID_0" type="int"></SimpleField>
<SimpleField name="ISO" type="string"></SimpleField>
<SimpleField name="NAME_0" type="string"></SimpleField>
<SimpleField name="ID_1" type="string"></SimpleField>
<SimpleField name="NAME_1" type="string"></SimpleField>
<SimpleField name="ID_2" type="string"></SimpleField>
<SimpleField name="NAME_2" type="string"></SimpleField>
<SimpleField name="TYPE_2" type="string"></SimpleField>
<SimpleField name="ENGTYPE_2" type="string"></SimpleField>
<SimpleField name="NL_NAME_2" type="string"></SimpleField>
<SimpleField name="VARNAME_2" type="string"></SimpleField>
<SimpleField name="Shape_Length" type="float"></SimpleField>
<SimpleField name="Shape_Area" type="float"></SimpleField>
</Schema>
<Folder><name>x</name>
<Placemark>
<Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
<ExtendedData><SchemaData schemaUrl="#x">
<SimpleData name="ID_0">186</SimpleData>
<SimpleData name="ISO">ROU</SimpleData>
<SimpleData name="NAME_0">Romania</SimpleData>
<SimpleData name="ID_1">1</SimpleData>
<SimpleData name="NAME_1">Alba</SimpleData>
<SimpleData name="ID_2">1</SimpleData>
<SimpleData name="NAME_2">Abrud</SimpleData>
<SimpleData name="TYPE_2">Comune</SimpleData>
<SimpleData name="ENGTYPE_2">Commune</SimpleData>
<SimpleData name="VARNAME_2">Oras Abrud</SimpleData>
<SimpleData name="Shape_Length">0.2792904164402</SimpleData>
<SimpleData name="Shape_Area">0.00302673357146115</SimpleData>
</SchemaData></ExtendedData>
<MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>23.117561340332031,46.269237518310547 23.108898162841797,46.265365600585937 23.107486724853629,46.264305114746207 23.104681015014762,46.260105133056641 23.101633071899471,46.250000000000114 23.100803375244254,46.249053955078239 23.097520828247184,46.246582031250114 23.0965576171875,46.245487213134822 23.095674514770508,46.244930267334098 23.092174530029354,46.243438720703182 23.088010787963924,46.240383148193473 23.083366394043082,46.238204956054801 23.075212478637809,46.234935760498047 23.071325302123967,46.239696502685547 23.070602416992131,46.241668701171875 23.069700241088924,46.242824554443416 23.068435668945369,46.243541717529354 23.066627502441406,46.244037628173771 23.064964294433651,46.246234893798885 23.062850952148437,46.247486114501953 23.0626220703125,46.248153686523438 23.062761306762752,46.250873565673942 23.061862945556697,46.255172729492301 23.061449050903434,46.256267547607422 23.05998420715332,46.258060455322322 23.057676315307674,46.259838104248161 23.055141448974666,46.262714385986442 23.053401947021484,46.264244079589901 23.049621582031193,46.266674041748161 23.043565750122013,46.268516540527457 23.041521072387695,46.269458770751953 23.034791946411076,46.270542144775334 23.027051925659293,46.27105712890625 23.025453567504826,46.271255493164063 23.022710800170898,46.272083282470703 23.020351409912053,46.271331787109432 23.018688201904297,46.270687103271598 23.015596389770508,46.270793914794922 23.014116287231502,46.271579742431697 23.009817123413143,46.275333404541016 23.006668090820426,46.277061462402401 23.004106521606445,46.279254913330135 23.001775741577205,46.282882690429688 23.005559921264648,46.283077239990348 23.009967803955135,46.28415679931652 23.014947891235465,46.286224365234489 23.019996643066463,46.28900146484375 23.024263381958121,46.292709350586051 23.027633666992301,46.295299530029411 23.028041839599609,46.295692443847656 23.032444000244197,46.294342041015625 23.03491401672369,46.293315887451229 23.044847488403434,46.290401458740234 23.047790527343807,46.28928375244152 23.053009033203239,46.288627624511719 23.057231903076229,46.288341522216797 23.064565658569393,46.287548065185547 23.070388793945426,46.286254882812614 23.075139999389592,46.284847259521428 23.075983047485465,46.284801483154411 23.085800170898494,46.28253173828125 23.098115921020451,46.280982971191406 23.099718093872127,46.280590057373104 23.105833053588981,46.278388977050838 23.112155914306641,46.274082183837947 23.116207122802791,46.270610809326172 23.117561340332031,46.269237518310547</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
</Placemark>
</Folder>
</Document></kml>
A partir de este punto, cuando el usuario busque una ciudad / pueblo, simplemente recupere los límites y dibuje alrededor de esas coordenadas en el mapa - https://developers.google.com/maps/documentation/javascript/overlays#Polygons
¡Espero que esto te ayude! ¡Buena suerte!
ACTUALIZACIÓN: Hice las fronteras de esta ciudad usando las coordenadas anteriores
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.dropbox.com/s/0grhlim3q4572jp/ROU_adm2%20-%20Copy.kml?dl=1'
});
ctaLayer.setMap(map);
(Puse un pequeño archivo kml en mi Dropbox que contiene los bordes de una sola ciudad)
Tenga en cuenta que esto utiliza el sistema KML integrado en Google, en el que su servidor obtiene el archivo, calcula la vista y se lo devuelve - tiene un uso limitado y lo utilicé para mostrarle cómo se ven los bordes. En su aplicación debería poder analizar las coordenadas del archivo kml, ponerlas en una matriz (como le indica la documentación del polígono - https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays ) y mostrarlos.
Tenga en cuenta que habrá diferencias entre los bordes que Google establece en http://www.google.com/maps y los bordes que obtendrás con estos datos.
¡Buena suerte!
ACTUALIZACIÓN: http://pastebin.com/x2V1aarJ , http://pastebin.com/Gh55EDW5 Estos son los archivos javascript (fueron minificados, así que usé un herramienta en línea para hacerlos legibles) desde el sitio web. Si usted no está completamente satisfecho con esta mi solución, no dude en estudiarlos.
¡Mucha suerte!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:42
Estaba buscando lo mismo y encontré la respuesta,
La solución es usar el mapa con estilo, en el siguiente enlace puede crear sus estilos personalizados a través del asistente y la prueba es al mismo tiempo asistente de estilo de google map
Puede consultar todas las opciones disponibles: aquí
Aquí está mi código de ejemplo que crea límites para los estados y oculta todas las etiquetas road y there.
var styles = [
{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "weight": 2.5 },
{ "color": "#24b0e2" }
]
},{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
];
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': "rajasthan"
}, (results, status)=> {
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
styles:styles,
center: results[0].geometry.location,
zoom:6
}
map = new google.maps.Map(document.getElementById("map"), mapOpts);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-25 06:09:43
Así que tengo una solución que no es perfecta, pero funcionó para mí. Utilice el ejemplo de polígono de Google, y utilice el punto en Google Maps para obtener ubicaciones lat & long.
Usé lo que llamo "ocular copy & paste" donde miras la pantalla y luego escribes los números que deseas; -)
<style>
#map {
height: 500px;
}
</style>
<script>
// This example creates a simple polygon representing the host city of the
// Greatest Outdoor Show On Earth.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 51.039, lng: -114.204},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 51.183, lng: -114.234},
{lat: 51.154, lng: -114.235},
{lat: 51.156, lng: -114.261},
{lat: 51.104, lng: -114.259},
{lat: 51.106, lng: -114.261},
{lat: 51.102, lng: -114.272},
{lat: 51.081, lng: -114.271},
{lat: 51.081, lng: -114.234},
{lat: 51.009, lng: -114.236},
{lat: 51.008, lng: -114.141},
{lat: 50.995, lng: -114.142},
{lat: 50.998, lng: -114.160},
{lat: 50.984, lng: -114.163},
{lat: 50.987, lng: -114.141},
{lat: 50.979, lng: -114.141},
{lat: 50.921, lng: -114.141},
{lat: 50.921, lng: -114.210},
{lat: 50.893, lng: -114.210},
{lat: 50.892, lng: -114.140},
{lat: 50.888, lng: -114.139},
{lat: 50.878, lng: -114.094},
{lat: 50.878, lng: -113.994},
{lat: 50.840, lng: -113.954},
{lat: 50.854, lng: -113.905},
{lat: 50.922, lng: -113.906},
{lat: 50.935, lng: -113.877},
{lat: 50.943, lng: -113.877},
{lat: 50.955, lng: -113.912},
{lat: 51.183, lng: -113.910}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
</script>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap">
</script>
Esto te da el esquema para Calgary. he adjuntado una imagen aquí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-22 22:02:59
He intentado twitter geo api, falló.
Api de Google map, falló, hasta ahora, no hay manera de que pueda obtener el límite de ciudad por cualquier api.
Twitter api geo endpoint NO le dará el límite de la ciudad,
Lo que te proporcionan es SOLO un cuadro delimitador con 5 puntos (lat, long)
Esto es lo que obtengo de twitter api geo para San Francisco
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-29 18:43:00
Utilice este código:
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ5Rw5v9dCXz4R3SUtcL5ZLMk&key=..." allowfullscreen></iframe>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-07 08:21:38