Google Maps API：强制放大到特定位置

问题描述

我对Google Maps API颇有新意，我想知道是否有办法强制放大到特定位置，例如：美国。

我正在寻找的是一种模拟鼠标滚轮缩放效果的方法，如果光标在美国，放大时使用滚动轮，中心将开始向光标方向移动。

我尝试使用'zoom_changed'事件并动态改变中心，但由于它没有运行一个桌面（设备模式），事件只在最后触发（

我在这里提供了一个例子，您可以放大您想放大的位置：

  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：强制放大到特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！