자동 완성을 통해 여러 Google지도 아이콘 추가

Question

누군가 내가 지금 당분간 가지고 있었던 문제로 나를 도왔다면 기쁜 일입니다! Lolavel, AngularJS 및 Google Maps API를 사용하여 여행 플래너를 만들려고합니다. 기본적으로 다음과 같은 작업을 수행하고 있습니다. 세 개의 텍스트 입력란이 있으며 텍스트 값을 가져 와서 Google지도의 해당 위치에 마커를 추가하고 싶습니다 (지도가 여기에 표시되지 않았습니다!). 그림!

나는이 내가 뭔가를 추가해야 index.php를에 있나요?

<div id="map-container" ng-controller="mapCtrl" class="map-container col-xs-12 col-sm-7 col-md-8 nopadding"> 
    <google-map draggable="true" center="map.center" zoom="map.zoom" options="map.options"></google-map> 
</div> 

<form ng-submit="submitTrip()" ng-Enter=""> <!-- ng-submit will disable the default form action and use our function --> 

<!-- START CITY --> 
<div class="form-group col-xs-12"> 
<input type="text" class="form-control input-lg" id ="start_city" name="start_city" ng-model="tripData.start_city" googleplace autocomplete="off" placeholder="Travel from" required> 
</div> 
<!-- VIA CITY --> 
<div class="form-group col-xs-12"> 
    <input type="text" class="form-control input-lg" name="via_city" ng-model="tripData.via_city" googleplace autocomplete="off" placeholder="Travel via" required> 
</div> 

<!-- END CITY --> 
<div class="form-group col-xs-12"> 
    <input type="text" class="form-control input-lg" name="end_city" ng-model="tripData.end_city" googleplace autocomplete="off" placeholder="Travel to" required> 
</div> 
</form> 

이 내가 때마다 뭔가 입력 필드에 입력이 기능을 addMarker라는 함수를 만들고 호출 할 코드에서 볼 수 있듯이 나는

angular.module('tripCtrl', ['ui.router', 'google-maps']) 
    .directive('googleplace', function() { 

     return { 
      require: 'ngModel', 
      link: function($scope, element) { 
      var autocomplete = new google.maps.places.Autocomplete(element[0]); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       var map, 
        formatted_address = place.formatted_address, 
        mapDiv = document.getElementById('map-container'), 
        geocoder = new google.maps.Geocoder(); 
        latLng = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 

       // Get LatLng information by name 
       geocoder.geocode({ 
        address: formatted_address, 
        location: latLng 
        }, function(results){ 
          map = new google.maps.Map(mapDiv, { 
          // Center map (but check status of geocoder) 
          center: results[0].geometry.location, 
          zoom: 5, 
          mapTypeId: google.maps.MapTypeId.TRANSIT 
         }); 
        $scope.addMarker(place); /*Want to add a marker every time we type in something i the text-inputs and save it there*/ 
        }); 
      }), 

      $scope.addMarker = function (item) { 
       angular.extend($scope, { 
        markers: { 
         store: { 
          lat: item.geometry.location.lat(), 
          lng: item.geometry.location.lng(), 
         } 
        } 
       }); 

      }; 

      } 
     }; 
    }); 

함께 일하고 있어요 내 각 모듈 페이지가 닫힐 때까지 위도, 경도 위치에 마커를 배치하고 마커를 저장하십시오.

그래서 질문은 텍스트 입력란 (예 : 노르웨이)에 텍스트를 입력 한 후 마커를 놓은 다음 두 번째 입력 인 '여행 경유'를 입력 할 때 마커를 추가하고지도에 두 개의 마커를 남겨 둘 수 있습니다 등등 ?

누군가가 솔루션에 대한 지식을 공유하시기 바랍니다가 그렇다면, 내가

Answer 1

: 내가 각도 및 자동 완성 옴을 통해 구글지도에 여러 개의 마커를 넣어했다 내 문제를 해결하는 방법을 발견 감사하겠습니다 텍스트 입력.

이 지금처럼 보이는 방법이지만 가장 좋은 경우 나도 몰라 ..

.directive('googleplace', function() { 
     var markers = [];   
     return { 
      require: 'ngModel', 
      link: function($scope, element) { 

      var autocomplete = new google.maps.places.Autocomplete(element[0]); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       var map, 
        formatted_address = place.formatted_address, 
        mapDiv = document.getElementById('map-container'), 
        geocoder = new google.maps.Geocoder(); 
        latLng = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()), 
        latLngForArray = [place.geometry.location.lat(),place.geometry.location.lng()]; 
       // Get LatLng information by name 
       geocoder.geocode({ 
        address: formatted_address, 
        location: latLng 
        }, function(results){ 
          map = new google.maps.Map(mapDiv, { 
          // Center map (but check status of geocoder) 
          center: results[0].geometry.location, 
          zoom: 5, 
          mapTypeId: google.maps.MapTypeId.TRANSIT 
         }); 
         var posi = setMarker(latLngForArray); 
         var marker, i; 
         for (i = 0; i < posi.length; i++) { 
          marker = new google.maps.Marker({ 
           position: new google.maps.LatLng(posi[i][0], posi[i][1]), 
           map: map, 
           icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png' 
          }); 
         } 

        }); 
      }) 

      function setMarker(position) { 
       markers.push(position); // add marker to array 
       return markers; 

      }; 
      } 
     }; 
    }); 

기능 setMarker 경우 가장 큰 변화와에 대한 루프. 페이지가 새로 고침 될 때까지 배열이 계속 조정을한다는 것을 기억하십시오!