20

angular-google-maps-team がこのサイトの「検索ボックス」の下に表示しているような、機能する検索ボックスの例を誰かが持っていますか: https://angular-ui.github.io/angular-google-maps /#!/api

何かを書いた場合、ドロップダウンで確実に見つかりますが、Enter キーを押してもマップは応答しません。- Enter キーを押したときにマップを正しい場所に移動するにはどうすればよいですか?

4

4 に答える 4

2

angular-google-maps github に送信された例を見ることをお勧めします。

https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/search-box.jsにある 123Tax 応答に欠けている JavaScript の一部があります。

そして、このスニペットはhttps://github.com/angular-ui/angular-google-maps/blob/master/example/search-box.htmlにロードされます

于 2015-09-02T13:36:59.913 に答える
1 
// the following controls the map in your Controller
$scope.map = { control: {}, center: { latitude: 37.70, longitude: -122.344 }, zoom: 9, refresh: {}};

function placeToMarker(searchBox, id) {

  var place = searchBox.getPlaces();
  if (!place || place == 'undefined' || place.length == 0) {
    return;
  }

  var marker = {
    id: id,
    place_id: place[0].place_id,
    name: place[0].name,
    address: place[0].formatted_address,
    latitude: place[0].geometry.location.lat(),
    longitude: place[0].geometry.location.lng(),
    latlng: place[0].geometry.location.lat() + ',' + place[0].geometry.location.lng()
  };
// push your markers into the $scope.map.markers array
if (!$scope.map.markers) {
    $scope.map.markers = [];
  }

// THIS IS THE KEY TO RECENTER/REFRESH THE MAP, to your question
$scope.map.control.refresh({latitude: marker.latitude, longitude: marker.longitude});

// the following defines the SearchBox on your Controller; events call placeToMarker function above
var searchBoxEvents = {
  places_changed: function (searchBox) {
    placeToMarker(searchBox, id);
  }
};

// this is defined on the Controller, as well. This specifies which template searchBoxEvents should match to; note the parentdiv
  $scope.searchBox = { template:'searchBox.template.html', events:searchBoxEvents, parentdiv: 'searchBoxParent'};

// in your HTML, declare where you want the searchBox. parentdiv: 'searchBoxParent' above looks for the id="searchBoxParent" in HTML
<div class="col-xs-12 col-md-12" id="searchBoxParent">
  <script type="text/ng-template" id="searchBox.template.html">
    <input type="text" ng-model="address" placeholder="Search Address" required />
  </script>
</div>

//Lastly, in HTML, make sure you wrap ui-gmap-search-box & ui-gmap-markers in ui-gmap-google-map
<ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="options" control="map.control">
    <ui-gmap-search-box template="searchBox.template" events="searchBox.events" parentdiv="searchBox.parentdiv"></ui-gmap-search-box>
    <ui-gmap-markers idkey="map.idkey" models="map.markers" coords="'self'" icon="'icon'" click="'onClicked'" fit="true"></ui-gmap-markers>
  </ui-gmap-google-map>
于 2014-12-23T12:24:48.757 に答える
0

Gavin の答えは正しいです。彼の例の 'searchbox.tpl.html についてもう少し詳しく説明します。次のように、ディレクティブの外に配置する必要があります。

<body>
    <div id="searchBoxParent"></div>
    <div id="map_canvas" ng-controller="mainCtrl">
    <script type="text/ng-template" id="searchbox.tpl.html">
        <input type="text" placeholder="Search Box">
    </script>
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-search-box template="searchbox.template" events="searchbox.events" parentdiv="searchbox.parentdiv"></ui-gmap-search-box>
    </ui-gmap-google-map>
</div>
<!--example-->
</body>

plunkr の動作: http://embed.plnkr.co/1rpXQhcZqwJ7rv0tyK9P/ (何らかの理由で、plunkr はクロムでのみ動作し、Firefox では動作しませんでした)

評判がないため、ギャビンの回答にコメントできませんでした。これが、追加の回答として情報を追加する理由です。

于 2016-09-29T19:40:09.980 に答える