如何通过自动完成将标记放置在角度谷歌地图上?

时间:2015-10-09 12:23:49

标签: javascript angularjs google-maps google-maps-api-3

我想通过自动完成搜索在google-angular-map上放置标记,我得到经纬度形式的位置,但标记没有添加,请检查....

控制器代码

$timeout(function() {

          var input = document.getElementById('pac-input');
          var searchBox = new google.maps.places.SearchBox(input);

          google.maps.event.addListener(searchBox, 'places_changed', function() {
             var marker= [] ;
             var places = searchBox.getPlaces();

             if (places.length == 0) {
               return;
             }

            var loc_data = {            

              coords: {
                  latitude: places[0].geometry.location.lat(),
                  longitude: places[0].geometry.location.lng()
              }
            };
            marker.push(loc_data);
            $scope.markers=marker;              
          });

HTMl代码

    <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" >

    </ui-gmap-markers>

<div class="col-md-4">

    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
</div>

2 个答案:

答案 0 :(得分:1)

Response

             //此示例使用Google地方自动填充功能向地图添加搜索框         //功能人们可以输入地理搜索。搜索框将返回一个         //选择包含地点和预测搜索字词组合的列表。

 <div class="form-group">
                                <label for="pacinput" class="control-label col-md-4">Search Location</label>
                                <div class="col-md-8">
                                    <input id="pacinput" class="form-control" type="text" placeholder="Search Location">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-4 col-md-8">
                                    <asp:HiddenField runat="server" ID="address" />
                                    <asp:HiddenField ID="txtLat" runat="server" />
                                    <asp:HiddenField ID="txtLng" runat="server" />
                                    <div id="map" style="width: 100%; height: 380px;">
                                    </div>
                                </div>
                            </div>

答案 1 :(得分:0)

您需要创建一个标记才能将其放置在地图上。

var marker = new google.maps.Marker({
          position: loc_data.coords,
          map: yourMapID
        });

如果你想添加一个drop动画或听众:

   marker.setAnimation(google.maps.Animation.DROP);
   marker.addListener('click', yourHandlerFunction);