Я новичок в StackOverflow и в области кодирования (в основном самоучка).

Я пытался обойти небольшое функциональное требование: я работаю над сайтом WordPress, используя карты. У меня уже есть настройки Google Maps API (Javascript, Places, Geocoding).

Я хочу показать на своем веб-сайте карту, которая фиксирует текущее местоположение пользователя и отображает точки экстренной помощи вокруг него, такие как банкоматы, полицейские участки, больницы и т. Д. В радиусе 10–30 км. Я полагаюсь на данные Google Maps, отображаемые на этой карте.

Есть ли какие-либо идеи / помощь / рекомендации, которые я могу получить от сообщества SO о том, как активно достичь этого? Любая помощь будет по достоинству оценена.

Aazi

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Кодекс поведения

,

Этого можно добиться с помощью кода JavaScript, используя JavaScript API Google Maps Platform вместе с функцией геолокации HTML5 и поисковыми запросами Библиотеки мест Google Maps .

Вот пример кода, который я сделал, чтобы помочь вам в этом случае использования. Вот также разбивка кода:

  1. Найдите местоположение пользователя и закрепите его в центре карты.

Используйте пример кода Geolocation для достижения этой цели. Вот это в коде:

navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; map.setCenter(pos); //Put marker of the Geolocated user location var userMarker = new google.maps.Marker({ map: map, position: pos }); google.maps.event.addListener(userMarker, 'click', function() { infoWindow.setContent('Your location'); infoWindow.open(map, this); }); 
  1. Воспользуйтесь поиском рядом с Библиотекой мест, чтобы получить нужный тип места поблизости. Поскольку Nearbysearch имеет только один тип, который должен быть указан в запросах, вам нужно создать 3 переменные запроса, например:
  var requestHosp = { location: pos, radius: '10000', type: ['hospital'] }; var requestAtm = { location: pos, radius: '10000', type: ['atm'] }; var requestPolice = { location: pos, radius: '10000', type: ['police'] }; 

Затем сделайте запросы Places NearbySearch следующим образом:

  var service = new google.maps.places.PlacesService(map); service.nearbySearch(requestHosp, callback); service.nearbySearch(requestAtm, callback); service.nearbySearch(requestPolice, callback); 

Обратите внимание, что он вызывает функцию обратного вызова . Эта функция создает маркер для каждого возвращенного места. Эта функция должна выглядеть так:

 function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i {amp}lt; results.length; i  ) { var place = results[i]; createMarker(results[i]); } } } 

Для функции createMarker сначала необходимо проверить конкретный тип места в массиве типов мест, чтобы определить значок, который вы будете использовать вместо него. Это должно выглядеть так:

  var type = place.types; var iconStyle; //loop to all the type of the place for (var i = 0; i {amp}lt; type.length; i  ) { //put array of Place types in placeType variable var placeType = type[i]; //Check the placeType and set the icon according to the placeType value switch (placeType) { case "hospital": iconStyle = "http://maps.google.com/mapfiles/kml/shapes/pharmacy_rx.png" break; case "atm": iconStyle = "http://maps.google.com/mapfiles/kml/shapes/dollar.png"; break; case "police": iconStyle = "http://maps.google.com/mapfiles/kml/shapes/police.png" break; } } //put marker of the places in the map var marker = new google.maps.Marker({ map: map, icon: iconStyle, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(place.name); infoWindow.open(map, this); }); }