2014-11-23 11 views

Antwort

0
// 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> 
+0

Wo soll die Funktion "placeToMarker" enden? – cvjensen

+0

Was ist Vorlage hier. Was ist seine Rolle? –

19

html:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true"> 
    <ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box> 
    <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
</ui-gmap-google-map> 

js Controller:

$scope.map = { 
    "center": { 
     "latitude": 52.47491894326404, 
     "longitude": -1.8684210293371217 
    }, 
    "zoom": 15 
}; //TODO: set location based on users current gps location 
$scope.marker = { 
    id: 0, 
    coords: { 
     latitude: 52.47491894326404, 
     longitude: -1.8684210293371217 
    }, 
    options: { draggable: true }, 
    events: { 
     dragend: function (marker, eventName, args) { 

      $scope.marker.options = { 
       draggable: true, 
       labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude, 
       labelAnchor: "100 0", 
       labelClass: "marker-labels" 
      }; 
     } 
    } 
}; 
var events = { 
    places_changed: function (searchBox) { 
     var place = searchBox.getPlaces(); 
     if (!place || place == 'undefined' || place.length == 0) { 
      console.log('no place data :('); 
      return; 
     } 

     $scope.map = { 
      "center": { 
       "latitude": place[0].geometry.location.lat(), 
       "longitude": place[0].geometry.location.lng() 
      }, 
      "zoom": 18 
     }; 
     $scope.marker = { 
      id: 0, 
      coords: { 
       latitude: place[0].geometry.location.lat(), 
       longitude: place[0].geometry.location.lng() 
      } 
     }; 
    } 
}; 
$scope.searchbox = { template: 'searchbox.tpl.html', events: events }; 
+1

können wir ein Suchfeld außerhalb der Karten-Tags platzieren? (ui-gmap-google-map) – Sekai

+4

@Sekai erreichen Sie dies, indem Sie 'parentdiv = '' {string} '" 'zur ' hinzufügen. Dadurch wird das Suchfeld an das Zieldiv angehängt. Siehe [angular-google-maps API] (http://angular-ui.github.io/angular-google-maps/#!/api). Beachten Sie die Syntax. Ein Zieldiv von 'id =" Suchfeldcontainer "' würde adressiert werden wie 'parentdiv =' 'searchfield-container' "' –

+0

Ja, aber Sie müssen immer zuerst eine Karte erstellen :) – Sekai

0

Antwort Gavin ist richtig, nur ein paar mehr Details über den ‚searchbox.tpl.html von seinem Beispiel. Es muss außerhalb der Richtlinie wie folgt platziert:

<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> 

Arbeits plunkr: http://embed.plnkr.co/1rpXQhcZqwJ7rv0tyK9P/ (aus irgendeinem Grund die plunkr nur für mich in Chrom gearbeitet, aber nicht in Firefox)

Ich konnte nicht kommentieren Gavins Antwort wegen mangelnder Reputation, deshalb füge ich die Info als zusätzliche Antwort hinzu.