Question

我正在使用Angular UI's Google Maps指令。

我想使用文本框让用户输入位置并使用自动完成功能，当用户从自动完成下拉列表中选择时，在地图画布中加载位置。

我将如何使用这些指令进行此操作？

由于

Answer 1

此功能尚不支持，正在建设中。请参阅：https://github.com/nlaplante/angular-google-maps/issues/383

Answer 2

Angular UI Google Maps指令

支持自动完成位置

这是您的搜索文本框和地图画布。

<input id="pac-input" class="controls" type="text" placeholder="Search for a location" ng-model="model.searchAddress" />

<div ui-map="model.locationMap" ui-options="mapOptions" id="map_canvas" class="map"
    style="height: 420px; width: 420px;" ui-event="{'map-click': 'setMarker($event, $params)'}"></div>

这是您应该放入与地图和搜索文本框关联的控制器的JS代码。此代码可以使用Google Maps API

var searchAddressInput = document.getElementById('pac-input');
var mapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(53.5085011, -6.2154598), //south east corner
    new google.maps.LatLng(53.5585011, -6.2654598)  //north west corner
);
var mapOptions = {
        center: new google.maps.LatLng(53.5085011, -6.2154598),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        bounds: mapBounds
    };
var autocomplete = new google.maps.places.Autocomplete(searchAddressInput, mapOptions);
//set the bounds of autocomplete to map's current viewport
autocomplete.bindTo('bounds', $scope.model.locationMap);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
    onPlaceChanged();
});

在上面的代码中，您将自动完成对象与搜索框相关联，然后在单击其中一个建议位置时将 onPlaceChanged（）功能绑定到该功能。这是将要执行的代码

function onPlaceChanged() {
    var place = autocomplete.getPlace();
    $scope.model.locationMap.panTo(place.geometry.location);
    $scope.model.locationMap.setZoom(14);
    //place pin on the map
    marker.setPosition(new google.maps.LatLng(place.geometry.location.k, place.geometry.location.B));
}

这就是全部。还有一个建议。如果您恰好在模态窗口中使用Google地图的自动填充功能，则必须将此代码段添加到CSS中：

div.pac-container {
    z-index: 1050 !important;
}

Bootstrap模式的z-index为900，因此自动完成建议会出现在它后面。你不会得到任何JS错误，所以这不是一个理想的情况，因为你不知道到底发生了什么。更改z-index可确保自动填充建议位于顶部。

AngularJS谷歌地图搜索/自动完成

2 个答案: