Центрирование карты Google на Америке
Ранее этим утром я создавал демо Google Map для клиента (используя данные EventBrite - я поделюсь этим, если смогу), и мне нужно было центрировать Google Map в Америке. Есть несколько способов сделать это, и я решил поделиться ими вместе с некоторыми снимками экрана, чтобы вы могли увидеть результаты.
Первый найденный мной результат Google привел к следующему результату: Как центрировать карту Google в стране по названию , В ответе используется геокодирование для перевода простого названия страны, например, Америки, в правильные результаты. Вам нужно немного прокрутить вниз, чтобы увидеть версию кода для текущей версии API Google, или просто посмотреть полный пример ниже.
<! DOCTYPE html> <html> <head> <title> Demo One </ title> <style type = "text / css"> #map_canvas {width: 500px; высота: 500 пикселей; } </ style> <script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </ script> <script type = "text / javascript "> function initialize () {var country =" Соединенные Штаты "var myOptions = {zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions); var geocoder = new google.maps.Geocoder (); geocoder.geocode ({'address': страна}, функция (результаты, статус) {if (status == google.maps.GeocoderStatus.OK) {map.setCenter (results [0] .geometry.location);} else { alert ("Не удалось найти местоположение:" + location);}}); } </ script> </ head> <body onload = "initialize ()"> <div id = "map_canvas"> </ div> </ body> </ html>Это дает вам:
Выглядит хорошо для меня - но геокодирование меня беспокоит. Для каждого посетителя вашего сайта в Google будет сделан запрос, чтобы он спросил, где находится Америка. Скорее всего, Америка не собирается двигаться. Наверное. И хотя этот запрос чертовски быстр, у вас нет реальной причины постоянно геокодировать его. Я сделал еще один быстрый Google и обнаружил эту страницу Википедии: Географический центр смежных Соединенных Штатов , Он определил долготу и широту для Америки как 39 ° 50 ° с.ш. 98 ° 35 ° з.д. Я переписал свой код, чтобы просто использовать эти жестко закодированные значения.
<! DOCTYPE html> <html> <head> <title> Демонстрация два </ title> <style type = "text / css"> #map_canvas {width: 500px; высота: 500 пикселей; } </ style> <script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </ script> <script type = "text / javascript "> function initialize () {var latlng = new google.maps.LatLng (39.5, -98.35); var myOptions = {zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions); } </ script> </ head> <body onload = "initialize ()"> <div id = "map_canvas"> </ div> </ body> </ html>И результат:
Выглядит немного по-другому для меня. Поэтому я вернулся к первой демонстрации и добавил следующую строку: console.log (results [0] .geometry.location.lat (), results [0] .geometry.location.lng ()) ;. Я проверил консоль для значений и просто обновил числа.
Я заархивировал демки (включая третью демо со значениями, возвращаемыми через консоль) и включил их в виде почтового индекса.
Загрузите прикрепленный файл.
Com/maps/api/js?Com/maps/api/js?