1

Делаю небольшую CRM-систему + несколько сервисов под нее.

Один из них - доставка. Менеджеру по курьерам необходимо видеть всю картину доставок на сегодня, т.е. адрес и время. Стоит отдельно отметить, что адрес на данный момент пользователь сам пишет на сайте в произвольном порядке.

  1. Как сделать отображение адресов доставок по городу? Вопрос довольно абстрактен, но не хочу двигаться в неправильном направлении. Стоит ли мне сразу при вводе клиента получать от него координаты, которые записывать в БД и выводить их при доставке?

  2. Можно ли в API google maps показать точку по адресу?

2 ответа 2

1

Стоит ли мне сразу при вводе клиента получать от него координаты, которые записывать в БД и выводить их при доставке?

Это необязательно. Вероятно служба доставки имеет базу данных своих клиентов с их адресами. С этим инструментом Latitude and Longitude of a Point вы можете определить гео-координаты для каждого адреса.

Далее вы можете использовать этот скрипт:

<script>
        
            function initialize() {
               var mapOptions = {
               center: new google.maps.LatLng(58.187185,15.1019575),
               zoom: 6,
               mapTypeId: google.maps.MapTypeId.TERRAIN,
            }; 
    
            var map = new google.maps.Map(document.getElementById("map_canvas"),
               mapOptions); 

            var museum1 = new google.maps.Marker({
               position: new google.maps.LatLng(56.1614029, 15.5995131),
               map: map,
               icon: '../../../maps_icons/museum.svg'
            });

            var infowindow1 = new google.maps.InfoWindow({
               content: '<div class="info"><h3>Naval Museum</h3><img src="../../images/marinmuseum-min.jpg" /><div style="clear:both"></div><a href="../marinmuseum.html" target="_blank"><button><h4>Read more</h4></button></a></div>'
            });

            google.maps.event.addListener(museum1, 'click', function() {
               infowindow1.open(map, museum1);
            });
            
            
            var museum2 = new google.maps.Marker({
               position: new google.maps.LatLng(58.4098582, 15.5230975),
               map: map,
               icon: '../../../maps_icons/museum.svg'
            });

            var infowindow2 = new google.maps.InfoWindow({
               content: '<div class="info"><h3>Swedish Air<br /> Force Museum</h3><img src="../../images/air-min.jpg" /><div style="clear:both"></div><a href="../air.html" target="_blank"><button><h4>Read more</h4></button></a></div>'
            });

            google.maps.event.addListener(museum2, 'click', function() {
               infowindow2.open(map, museum2);
            });
            
            
            var museum3 = new google.maps.Marker({
               position: new google.maps.LatLng(60.6002163, 15.6165818),
               map: map,
               icon: '../../../maps_icons/museum.svg'
            });

            var infowindow3 = new google.maps.InfoWindow({
               content: '<div class="info"><h3>Falun Mine Museum</h3><img src="../../images/falungruva-min.jpg" /><div style="clear:both"></div><a href="../falungruva.html" target="_blank"><button><h4>Read more</h4></button></a></div>'
            });

            google.maps.event.addListener(museum3, 'click', function() {
               infowindow3.open(map, museum3);
            });
            
            
            var museum4 = new google.maps.Marker({
               position: new google.maps.LatLng(57.7714294, 11.881156),
               map: map,
               icon: '../../../maps_icons/museum.svg'
            });

          }
          google.maps.event.addDomListener(window, 'load', initialize);
   
        </script>
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<body onload=initialize()>
<main>
<meta>
<section>
<header>
<h1>Museums in Sweden</h1>
</header>
<div role=application>
<p>For more information, click on the selected icon</p>
<div>
<div id=map_canvas></div>
</div>
</div>
</section>
</main>
<script>....(смотри скрипт)</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AAAA4&amp;language=en"></script>
</body>
</html>

Если вы желает создавать маршрут для движения к объекту то можете применить этот скрипт:

<script>if (navigator.geolocation) { //Checks if browser supports geolocation
   navigator.geolocation.getCurrentPosition(function (position) {  //This gets the
     var latitude = position.coords.latitude;                    //users current
     var longitude = position.coords.longitude;                 //location
     var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();
     var mapOptions = //Sets map options
     {
       zoom: 15,  //Sets zoom level (0-21)
       center: coords, //zoom in on users location
       mapTypeControl: true, //allows you to select map type eg. map or satellite
       navigationControlOptions:
       {
         style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
       },
       mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
     };
     map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"), mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));
     var request = {
       origin: coords,
       destination: '65.791238, 21.657444',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function (response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     }); 
     
   });
    
 }
 </script>
<!DOCTYPE html>
<html lang=de>
<head>
<meta charset=utf-8 />
<meta name=robots content=all />
<meta name=author content=https://plus.google.com/107237366663877426287 />
<meta name=description content="Karte zu Burg Eketorp" />
<meta name=viewport content="width=device-width, initial-scale=1" />
<meta name=apple-mobile-web-app-capable content=yes />
<meta name=apple-mobile-web-app-status-bar-style content=black />
<title>Karte zu Burg Eketorp</title>
</head>
<body style=background:#e6e6fa>
<main>
<meta property=inLanguage content=de />
<header>
<h1 property=name style=text-align:center;font-size:90%;font-family:Verdana;color:#2f4f4f>Burg Eketorp</h1>
</header>
<div role=application>
<div>
<div id=map style="border:.15em ridge #708090;height:30em"></div>
<div id="panel">
<div id="directions"></div>
</div>
</div>
</div>
</main>
<script>(смотри скрипт)</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AAAA&amp;language=en&amp;callback=initialize"></script>
</body>
</html>

Примените этот инструмент Гугл Closure Compiler для оптимизации ваших скриптов.

0

координаты вы можете получать в json формате используя геокодирование. Координаты запрашивать не стоит, достаточно вывести адрес, который имеет геокоды.

Вот к примеру как вы можете указать точку по адресу:

<!DOCTYPE html>
<html>
  <head>
<style>
   #map {
    height: 400px;
    width: 100%;
   }
</style>
  </head>
  <body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
  function initMap() {
    var Kiev= {lat: 50.4501, lng: 30.5234};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: Kiev
    });
    var marker = new google.maps.Marker({
      position: Kiev,
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap">
</script>
  </body>
</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.