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

Question

如果有人帮助我解决我已经有一段时间的问题，我会很高兴!我正在尝试使用 Laravel、AngularJS 和 Google Maps API 创建一个旅行计划器。基本上我想做的是:我有三个文本输入字段，我想获取文本值并在谷歌地图上的那个地方添加一个标记(这里没有显示 map !)，如图所示!

我在 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 的函数，并在每次在输入字段中输入内容时调用此函数，并在经纬度位置放置一个标记，并将该标记保存在那里，直到页面关闭.

所以问题是我如何在文本字段中输入文本后放置标记，即挪威奥斯陆，然后在输入第二个输入“Travel via”时放置另一个标记并且两个标记留在 map 上并且很快 ？

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

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-loop。请记住，数组会一直排到页面刷新为止!