Angular Google Maps指令在"place_changed"之后缩放太近事件
Angular Google Maps Directive zoom too close after "place_changed" event
我目前正在为DHL开发一个商店查找器应用程序,可以在storefinder.hashfff.com/app/index.html查看
在这个应用程序中,我使用的是Angular - Google - Maps库,它提供了一些简洁的功能,尽管我认为直接使用Google Maps API会是更好的选择,因为Google API文档更详细,然而,作为Angular的新手,我认为它会有所帮助。
我的搜索框被绑定到一个名为"place_changed"的事件监听器,它在自动完成设置后触发,它将自动完成作为一个参数。
events: {
place_changed: function(autocomplete) {
var searchString = autocomplete.gm_accessors_.place.Sc.formattedPrediction;
var searchCountry = searchString.split(',').pop().trim();
var searchCity = searchString.split(',');
var jsonQuery = "http://dhl.hashfff.com/api/dhl_store_finder_api.php/?country=" + searchCountry;
// Filter search results by search term. City, Address or Country
$.getJSON(jsonQuery , function(data) {
$scope.$apply(function() {
$scope.stores = _.filter(data, function(search) {
console.log(search.address2.toLowerCase().indexOf(searchCity[0].toLowerCase()));
return search.city.toLowerCase() == searchCity[0].toLowerCase() || search.address2.toLowerCase().indexOf(searchCity[0].toLowerCase()) > -1 || search.country.toLowerCase().indexOf(searchCity[0].toLowerCase()) > -1;
});
$('.cd-panel-search').addClass('is-visible');
});
});
place = autocomplete.getPlace();
if (place.address_components) {
// For each place, get the icon, place name, and location.
newMarkers = [];
var bounds = new google.maps.LatLngBounds();
var marker = {
id:place.place_id,
place_id: place.place_id,
name: place.address_components[0].long_name,
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng(),
options: {
visible:false
},
templateurl:'window.tpl.html',
templateparameter: place
};
newMarkers.push(marker);
bounds.extend(place.geometry.location);
$scope.map.bounds = {
northeast: {
latitude: bounds.getNorthEast().lat(),
longitude: bounds.getNorthEast().lng()
},
southwest: {
latitude: bounds.getSouthWest().lat(),
longitude: bounds.getSouthWest().lng()
}
}
_.each(newMarkers, function(marker) {
marker.closeClick = function() {
$scope.selected.options.visible = false;
marker.options.visble = false;
return $scope.$apply();
};
marker.onClicked = function() {
$scope.selected.options.visible = false;
$scope.selected = marker;
$scope.selected.options.visible = true;
};
});
$scope.map.markers = newMarkers;
}
}
}
发生的事情是,自动补全后,它去搜索的地方,但变焦设置为最大,这太近了。我知道map. setzoom(5)是通常的答案,但是我在这个事件侦听器中没有可用的地图对象。
我希望有人有经验的谷歌地图的Angular指令,可以给我一个帮助。如果您需要任何其他代码,我很乐意更新查询。
边界的创建是无用的,因为当latlnbounds确实具有相同的NE和SW时(这是您的示例中的情况,因为您只有一个地方/位置),您可以简单地设置地图的中心:
$scope.map.center={
latitude: bounds.getNorthEast().lat(),
longitude: bounds.getNorthEast().lng()
};
不同之处在于:地图的缩放不会被修改(就像使用fitBounds时那样)
当你想设置缩放时,使用,例如:
$scope.map.zoom=5;
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 当涉及css缩放时,如何获得页面上的点击位置
- "缩放“;使用JavaScript的浏览器窗口/视图
- 获取"可见”;缩放后的视口区域