Fatal编程技术网
  • angularjs/
  • Angularjs 谷歌地图搜索功能的工作示例

Angularjs 谷歌地图搜索功能的工作示例

angularjs google-maps

Angularjs 谷歌地图搜索功能的工作示例,angularjs,google-maps,angular-google-maps,Angularjs,Google Maps,Angular Google Maps,有没有人有谷歌地图团队在本网站“搜索框”下展示的工作搜索框示例： 如果你写了一些东西，它肯定会在下拉列表中找到，但当你按enter键时，地图没有响应。-当您按下enter键时，如何使地图移动到正确的位置？//以下命令控制控制器中的地图 // the following controls the map in your Controller $scope.map = { control: {}, center: { latitude: 37.70, longitude: -122.344 }, z

有没有人有谷歌地图团队在本网站“搜索框”下展示的工作搜索框示例：

如果你写了一些东西，它肯定会在下拉列表中找到，但当你按enter键时，地图没有响应。-当您按下enter键时，如何使地图移动到正确的位置？

//以下命令控制控制器中的地图

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


$scope.map={控制：{}，中心：{纬度：37.70，经度：-122.344}，缩放：9，刷新：{}；
功能放置标记器（搜索框，id）{
var place=searchBox.getPlaces（）；
如果（！place | | place='undefined'| | place.length==0）{
返回；
}
变量标记={
id:id，
地点标识：地点[0]。地点标识，
名称：地点[0]。名称，
地址：地点[0]。格式化的地址，
纬度：位置[0]。几何体。位置。纬度（），
经度：位置[0]。几何体。位置。lng（），
latlng:place[0]。几何图形。位置。lat（）+，“+place[0]。几何图形。位置。lng（）
};
//将标记推入$scope.map.markers数组
如果（！$scope.map.markers）{
$scope.map.markers=[]；
}
//这是对您的问题重新居中/刷新地图的关键
$scope.map.control.refresh（{latitude:marker.latitude，longitude:marker.longitude}）；
//下面定义了控制器上的搜索框；事件调用上面的placeToMarker函数
var searchBoxEvents={
更改位置：功能（搜索框）{
placeToMarker（搜索框，id）；
}
};
//这也是在控制器上定义的。它指定了SearchBoxeEvents应与哪个模板匹配；请注意parentdiv
$scope.searchBox={template:'searchBox.template.html'，事件：searchBoxEvents，parentdiv:'searchBoxParent'}；
//在HTML中，声明搜索框的位置。parentdiv:“searchBoxParent”上面的“searchBoxParent”在HTML中查找id=“searchBoxParent”
//最后，在HTML中，确保在UIGMAP谷歌地图中包装UIGMAP搜索框和UIGMAP标记
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>
我建议您查看发送给的示例

123Tax响应中缺少一段JavaScript，可在

这段代码加载在

中，加文的回答是正确的，只是关于他示例中的“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：（出于某种原因，plunkr只在chrome中对我有效，但在firefox中无效）

由于缺乏声誉，我无法对加文的答案发表评论，这就是我添加信息作为附加答案的原因。

您希望placeToMarker函数在哪里结束？这里的模板是什么。它的作用是什么？我们可以在地图标签外放置搜索框吗？（ui gmap谷歌地图）@Sekai您可以通过添加
parentdiv=“{string}”来实现这一点
到
中。这将在目标div处附加搜索框。请参阅。注意语法。目标div的
id=“searchfield-container”
地址类似于
parentdiv=“'searchfield-container'”
是的，但您必须首先创建一个映射：）什么是模板：“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>