Карта центра по названию города с использованием геокода

Question

Карта центра по названию города с использованием геокода

1

Я пытался понять это почти два часа, я нашел множество примеров как в Google, так и в Stackoverflow, но все они либо не работают для меня, либо не совсем то, что я хочу.

Чего я хочу? Я хочу, чтобы карта была сосредоточена на значении (название города), которое находится внутри тега H6, содержащего город. Этот H6 имеет идентификатор #City.

Что я пробовал? 1 пример:

центр по стране по имени google maps api v3 map.setCenter(results[0].geometry.location); не нравится следующий фрагмент кода из приведенной выше ссылки: map.setCenter(results[0].geometry.location); Это вызывает ошибку:

Местоположение не определено

<h6 id="City">Mijas Costa</h6>
<div id="map"></div>
<style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>
<script>
  function initMap() {
    // Styles a map in night mode.
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 52.3702157,
        lng: 4.895167899999933
      },
      zoom: 12,
      styles: [{
          elementType: 'geometry',
          stylers: [{
            color: '#242f3e'
          }]
        },
        {
          elementType: 'labels.text.stroke',
          stylers: [{
            color: '#242f3e'
          }]
        },
        {
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#746855'
          }]
        },
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#d59563'
          }]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#d59563'
          }]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{
            color: '#263c3f'
          }]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#6b9a76'
          }]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{
            color: '#38414e'
          }]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{
            color: '#212a37'
          }]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#9ca5b3'
          }]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{
            color: '#746855'
          }]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{
            color: '#1f2835'
          }]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#f3d19c'
          }]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{
            color: '#2f3948'
          }]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#d59563'
          }]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{
            color: '#17263c'
          }]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{
            color: '#515c6d'
          }]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{
            color: '#17263c'
          }]
        }
      ]
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWwQ0Nm5wL4MqqV_o5VIroxzBpzmMjXuw&callback=initMap">
</script>

Спасибо за любую помощь.

beaver 09 янв. 2018, в 12:26

Источник

Теги:

javascript

google-maps

1 ответ

Ещё вопросы

beaver · Answer 1 · 2018-01-09T11-28-00.000Z

В geocoder.geocode обработчик результата, если status == google.maps.GeocoderStatus.OK сделать просто:

map.setCenter(results[0].geometry.location);

Вот полный фрагмент:

$(document).ready(function() {
  $('#search').on('click', function() {
    geocoding();
  });
});

var map, geocoder;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 52.3702157,
      lng: 4.895167899999933
    },
    zoom: 12,
    styles: [{
      elementType: 'geometry',
      stylers: [{
        color: '#242f3e'
      }]
    }, {
      elementType: 'labels.text.stroke',
      stylers: [{
        color: '#242f3e'
      }]
    }, {
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#746855'
      }]
    }, {
      featureType: 'administrative.locality',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#d59563'
      }]
    }, {
      featureType: 'poi',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#d59563'
      }]
    }, {
      featureType: 'poi.park',
      elementType: 'geometry',
      stylers: [{
        color: '#263c3f'
      }]
    }, {
      featureType: 'poi.park',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#6b9a76'
      }]
    }, {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [{
        color: '#38414e'
      }]
    }, {
      featureType: 'road',
      elementType: 'geometry.stroke',
      stylers: [{
        color: '#212a37'
      }]
    }, {
      featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#9ca5b3'
      }]
    }, {
      featureType: 'road.highway',
      elementType: 'geometry',
      stylers: [{
        color: '#746855'
      }]
    }, {
      featureType: 'road.highway',
      elementType: 'geometry.stroke',
      stylers: [{
        color: '#1f2835'
      }]
    }, {
      featureType: 'road.highway',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#f3d19c'
      }]
    }, {
      featureType: 'transit',
      elementType: 'geometry',
      stylers: [{
        color: '#2f3948'
      }]
    }, {
      featureType: 'transit.station',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#d59563'
      }]
    }, {
      featureType: 'water',
      elementType: 'geometry',
      stylers: [{
        color: '#17263c'
      }]
    }, {
      featureType: 'water',
      elementType: 'labels.text.fill',
      stylers: [{
        color: '#515c6d'
      }]
    }, {
      featureType: 'water',
      elementType: 'labels.text.stroke',
      stylers: [{
        color: '#17263c'
      }]
    }]
  });

  geocoder = new google.maps.Geocoder();

  var city = $("#City").html();
  document.getElementById('address').value = city;
  geocoding(city);
}

function geocoding(address) {
  if (!address)
    address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode error: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

#geocode {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -180px;
  z-index: 15;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

<h6 id="City">Mijas Costa</h6>
<div id="geocode">
  <input id="address" type="textbox" value="" />
  <input id='search' type="button" value="search" />
</div>
<div id="map"></div>

Хорошо, поэтому я попытался реализовать код, но наткнулся на ошибку, которую я вчера тоже получил. Cannot read property 'location' of undefined Я не знаю, как это исправить. Я попытался использовать anwser ниже, но это не решает проблему.
Вышеприведенный фрагмент работает ... Вот также рабочая скрипка, основанная на вашем примере: jsfiddle.net/beaver71/bwuh315u Попробуйте адаптировать ее к вашему случаю.
Я установил, что он работает локально, но когда я пытаюсь реализовать его на сервере, он продолжает выдавать ошибку об неопределенности местоположения.
если ваш сервер имеет публичный доступ, пожалуйста, дайте мне проверить
Есть ли способ связаться с вами в частном порядке? Мне неудобно делиться адресом сайта публично.
используйте непосредственно эту ссылку gadan.it/site/contact
есть ошибка: вы написали map.setCenter(results.geometry.location); вместо map.setCenter(results[0].geometry.location);
результаты геокодирования являются массивами: проверьте developers.google.com/maps/documentation/javascript/…