通过自动完成添加多个谷歌地图标记

Question

我很乐意帮助解决您一直以来遇到的问题！我正在尝试使用Laravel、AngularJS和Google Maps API创建旅行计划器。基本上，我想做的是：我有三个文本输入字段，我想获取文本值并在谷歌地图上添加一个标记(这里没有显示地图!)，如图片所示！在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>

这是我正在使用的Angular模块。

    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(),
                        }
                    }
                });

            };

            }
        };
    });

如代码所示，我想创建一个名为addMarker的函数，并在每次输入字段中键入内容时调用此函数，在位置的纬度和经度处放置标记，并将该标记保存在那里，直到关闭页面。

因此，问题是如何在输入文本字段中键入文本后放出标记，例如奥斯陆，挪威，然后在输入第二个输入“通过旅行”时放出另一个标记，两个标记留在地图上等等？

如果有人有解决方案，请分享您的知识，我将不胜感激 :)

- Kahin

---

读了你的文本和代码，我的第一个想法是：“太好了！这样做。”我的第二个想法是：“但你的问题是什么？” - nilsK

谢谢您的注释！我刚刚修改了它，现在这个问题是否容易理解？ - Kahin

我理解的问题是：当添加第二个标记时，第一个标记消失了？看起来每次调用$scope.addMarker函数时，您都在覆盖$scope.markers。我正在使用leaflet-map，所以不能百分之百确定这对您是否有效。尝试扩展$scope.markers：angular.extend($scope.markers，{lat:...，lng:...}) - nilsK

Answer 1

我找到了一个解决问题的方法，通过angular和文本输入框的自动完成功能，在谷歌地图上放置多个标记。

现在它看起来是这样的，但我不知道它是否是最好的方法...

   .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和for循环。请记住，数组只会在页面刷新之前一直增长！

- Kahin