Google Maps API：强制放大到特定位置 [英] Google Maps API: forcing zoom in to a specific location
问题描述
我对Google Maps API颇有新意，我想知道是否有办法强制放大到特定位置，例如：美国。
我正在寻找的是一种模拟鼠标滚轮缩放效果的方法，如果光标在美国，放大时使用滚动轮，中心将开始向光标方向移动。
我尝试使用'zoom_changed'事件并动态改变中心，但由于它没有运行一个桌面（设备模式），事件只在最后触发（
这是我的代码：
var map;
var centerUS;
var currentCenter;
var currentZoom;
函数initMap（）{
//定义地图
map = new google.maps.Map（document.getElementById（'map'），{
center： {lat：0，lng：0}，
zoom：3，
disableDefaultUI：true
}）;
//限制缩放
map.setOptions（{minZoom：3，maxZoom：10}）;
//初始化变量
currentZoom = map.getZoom（）;
currentCenter = map.getCenter（）;
centerUS = new google.maps.LatLng（40，-100）;
//添加监听器以放大
map.addListener（'zoom_changed'，function（）{
zoomInTheUS（）;
}）;
函数zoomInTheUS（）{
//获取新值
var newZoom = map.getZoom（）;
currentCenter = map.getCenter（）;
//如果用户放大
if（newZoom> currentZoom）{
//当前中心与美元中心之间的差异b $ b var changeLat = centerUS.lat（） - currentCenter.lat（）;
var changeLng = centerUS.lng（） - currentCenter.lng（）;
//以距离的10％接近美国的中心
var newLat = currentCenter.lat（）+ changeLat * 0.1;
var newLng = currentCenter.lng（）+ changeLng * 0.1;
//定义新的中心并平移到它
var newCenter = new google.maps.LatLng（newLat，newLng）;
map.panTo（newCenter）;
}
//实现currentZoom的值
currentZoom = newZoom;
}
我试图在'drag'事件期间这样做，因为它是反复触发的，但它不起作用。我认为这可能是因为事件触发得非常快，而newZoom和currentZoom变量几乎总是具有相同的值。或者，也许在设备模式下，Google Maps API中的缩放变量会在事件结束时刷新。我只是假设，我不知道。
有没有办法实现我想要的？我想在检测到两个手指或者可能从设备模式切换到非设备模式时禁用平移，但我还没有发现任何有关它的信息。
谢谢您可以尝试先找到自己的位置，然后自动缩放到该位置。
https://stackoverflow.com/a/20930874/7707749我在这里提供了一个例子，您可以放大您想放大的位置：
function getPlaces（query）{service = new google.maps.places.PlacesService（document.getElementById（'attributions'）// attributions-container）; //发送查询service.textSearch（{query：query}，function（results，status）{if（status == google.maps.places.PlacesServiceStatus.OK）{for（var i = 0; i< results。 ）;} addMapMarker（markerInfo，i）{var infowindow = new google.maps.InfoWindow（），marker;};} addMapMarker（results [i]，i）;} map.fitBounds（mapPointsBounds）;}}）; var service = new google.maps.places.PlacesService（map）; var marker; //这是标记用位置和动画创建的位置marker = new google.maps.Marker（{animation：google.maps.Animation.DROP，position：markerInfo.geometry.location，map：map，markerInfo：markerInfo}） ; allMarkers.push（标记）; //将所有标记保留在数组中mapPointsBounds.extend（markerInfo.geometry.location）; //标记，'click'，（function（marker，i）{return function（）{infowindow.setContent（'< div>这是标记：'+ （标记，i））;}
#map {height：100％;} html，body {height：100％;保证金：0; padding：0;}
< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script>< img src =http://developers.google.com/places/文档/ images / powered-by-google-on-white.png/>< input id =searchTextFieldtype =textsize =50placeholder =输入位置autocomplete =on runat =serveronchange =initMap（this.value）/> < ul id =results>< / ul>< div id =attributionsstyle =background：＃f1f1f1>当有任何< / div>时，您会在这里看到归因。 < div id =map>< / div>< script src =https://maps.googleapis.com/maps/api/js?&libraries=placesasync defer>< / script> ;<脚本> var startLatLng，//将其更改为地图最后的某个值allMarkers = []，//保留标记的全局副本mapPointsBounds = []，//映射所有标记的地图边界map; //地图的副本//当Google准备就绪时，它会调用它，它是`& callback = initMap`上方脚本标记中的查询字符串：function initMap（query）{startLatLng = new google.maps.LatLng（[0 ，0]）; mapPointsBounds = new google.maps.LatLngBounds（）; map = new google.maps.Map（document.getElementById（'map'），{center：startLatLng，zoom：13}）; getPlaces（查询）; }< / script>
I'm quite new with the Google Maps API and I was wondering if there is a way to force the zoom in to a specific location, for example: the US.
What I'm looking for is a way to simulate the kind of zooming in effect of the mouse scrolling wheel, if the cursor is in the US, when you zoom in with the scrolling wheel, the center will start moving towards the cursor.
I tried using the 'zoom_changed' event and changing the center dynamically, but since it is not running in a desktop (device mode), the event is only triggered at the end (source).
Here is my code:
var map;
var centerUS;
var currentCenter;
var currentZoom;
function initMap() {
//define Map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3,
disableDefaultUI: true
});
//limit the zoom
map.setOptions({ minZoom: 3, maxZoom: 10 });
//initialization of variables
currentZoom = map.getZoom();
currentCenter = map.getCenter();
centerUS = new google.maps.LatLng(40, -100);
//add the listener for zooming in
map.addListener('zoom_changed', function () {
zoomInTheUS();
});
}
function zoomInTheUS() {
//get new values
var newZoom = map.getZoom();
currentCenter = map.getCenter();
//if the user is zooming in
if (newZoom > currentZoom) {
//difference between the current center and the center of the US
var changeLat = centerUS.lat() - currentCenter.lat();
var changeLng = centerUS.lng() - currentCenter.lng();
//approach the center of the US by a factor of 10% of the distance
var newLat = currentCenter.lat() + changeLat * 0.1;
var newLng = currentCenter.lng() + changeLng * 0.1;
//define new center and pan to it
var newCenter = new google.maps.LatLng(newLat, newLng);
map.panTo(newCenter);
}
//actualize the value of currentZoom
currentZoom = newZoom;
}
I tried to do it during the 'drag' event because it is triggered repeatedly, but it doesn't work. I think it may be because the event is triggered very quickly and the newZoom and currentZoom variable almost always have the same value. Or maybe, on device mode, the zoom variable from the Google Maps API is refreshed at the end of an event. I am only assuming, I do not know.
Is there a way to achieve what I want? I thought of disabling the panning when 2 fingers are detected or maybe changing from device mode to non-device mode, but I haven't found anything about it.
Thank you in advance.
You could try to locate your own location first and then auto-zoom to that location. https://stackoverflow.com/a/20930874/7707749
I made here an example how you can zoom into the location you wish to zoom in for:
function getPlaces(query) {
service = new google.maps.places.PlacesService(
document.getElementById('attributions') //attributions-container
);
//send a query
service.textSearch({query:query}, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
addMapMarker(results[i], i);
}
map.fitBounds(mapPointsBounds);
}
});
}
function addMapMarker(markerInfo, i) {
var infowindow = new google.maps.InfoWindow(), marker;
var service = new google.maps.places.PlacesService(map);
var marker;
//this is where the marker is created with position and animation
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: markerInfo.geometry.location,
map: map,
markerInfo: markerInfo
});
allMarkers.push(marker); //keeping all markers in an array
mapPointsBounds.extend(markerInfo.geometry.location); //extend bounds to contain this marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<div>This is marker:' + marker + '</div>');
infowindow.open(map, marker);
}
})(marker, i));
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img src="http://developers.google.com/places/documentation/images/powered-by-google-on-white.png"/>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" onchange="initMap(this.value)"/>
<ul id="results"></ul>
<div id="attributions" style="background:#f1f1f1"> You'll see here the attributions when there are any </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places" async defer></script>
<script>
var startLatLng, //change this to some value near to where the map will end up
allMarkers = [], //keep a global copy of your markers
mapPointsBounds = [], //map bounds of all markers
map; //copy of the map
//Google will call this when it's ready, it's a query string in the script tag above `&callback=initMap`:
function initMap(query) {
startLatLng = new google.maps.LatLng([0, 0]);
mapPointsBounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), {
center: startLatLng,
zoom: 13
});
getPlaces(query);
}
</script>
这篇关于Google Maps API：强制放大到特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
