Question

如果有人帮我解决了一段时间以来遇到的问题，我会很高兴的！我正在尝试使用Laravel，AngularJS和Google Maps API创建旅行计划器。基本上我要做的是：我有三个文本输入字段，我想得到文本值，并在谷歌地图上添加一个标记到该地方（这里没有显示地图！），如图片！

enter image description here

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

所以问题是如何在文本字段中键入文本后输出标记，即挪威奥斯陆，然后在键入第二个输入时输出另一个标记＆＃34;通过＆＃34;这两个标记留在地图上等等？

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

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和for循环最大的变化。请记住，数组只是保持划船直到页面刷新！

通过自动填充功能添加多个Google地图标记

1 个答案: