Question

我使用Google地图API（javascript）使用标记选项找到了州内的32个地点（地区）。此外，我试图通过单击标记来缩放位置（区）。但是，当我点击标记时，不缩放我标记的确切位置（区）。请通过解决方案帮助我。

我在下面发布了我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>marker</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
   
	</head>
		<body>
			<div id="map" style="width: 1366px; height: 700px;"></div> 
			<script>
	
					var minZoomLevel = 7;
					
				function initMap() {
						var myLatlng = {
							lat: 11.127123,
							lng: 78.656894
						};

						var map = new google.maps.Map(document.getElementById('map'), {
							zoom: minZoomLevel,
							center: myLatlng,
							mapTypeId: google.maps.MapTypeId.HYBRID
						});

						var emptyStyles = [{
							featureType: "all",
							elementType: "labels",
							stylers: [{
								visibility: "off"
							}]
						}];

						map.setOptions({
							styles: emptyStyles
						});

						google.maps.event.addListener(map, 'zoom_changed', function() {
							if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
						});


						var districts = new Array("Namakkal", "Madurai", "Perambalur", "The Nilgiris", "Ariyalur", "Karur", "Theni", "Chennai", "Kancheepuram", "Vellore", "Thiruvallur", "Villupuram", "Coimbatore", "Tirunelveli", "Tiruchirappalli", "Cuddalore", "Tiruppur", "Tiruvannamalai", "Thanjavur", "Erode", "Dindigul", "Virudhunagar", "Krishnagiri", "Kanniyakumari", "Thoothukkudi", "Pudukkottai", "Nagapattinam", "Dharmapuri", "Ramanathapuram", "Sivagangai", "Thiruvarur");
						var geocoder = new google.maps.Geocoder();
						var marker;

						for (index = 0; index < districts.length; ++index) {

							//alert(districts[index]);



							geocoder.geocode({
								'address': districts[index]
							}, function(results, status) {
								//alert(districts[index]);
								if (status == google.maps.GeocoderStatus.OK) {
									//alert(index);
									var latitude = results[0].geometry.location.lat();
									var longitude = results[0].geometry.location.lng();
									//alert(latitude);
									//alert(longitude);

								}

								

								marker = new google.maps.Marker({
									position: {
										lat: latitude,
										lng: longitude
									},
									map: map,
									animation: google.maps.Animation.DROP,
									//labelContent: "chennai",
								   // labelStyle: {opacity: 0.75},
									title: districts[index]
								});
								map.addListener('center_changed', function() {
									window.setTimeout(function() {
										map.panTo(marker.getPosition());
									}, 100);
								});

								marker.addListener('click', function() {
									map.setZoom(8);
									map.setCenter(marker.getPosition());
									map.getBounds();
								});



							});



						}


					}
						function sleep(milliseconds) {
						var start = new Date().getTime();
						for (var i = 0; i < 1e7; i++) {
							if ((new Date().getTime() - start) > milliseconds) {
								break;
							}
						}
					}
			</script>
				<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIVqRDN8E_OEPcarzmz5mIJbyk25x424c&signed_in=true&callback=initMap" async defer>
				</script>
	</body>
</html>

Answer 1

要使地图位于点击标记的中心，请使用this引用点击监听器内的标记：

marker.addListener('click', function() {
  map.setZoom(8);
  map.setCenter(this.getPosition());
  map.getBounds();
});

proof of concept fiddle (but your code has lots of other issues)

单击标记时，缩放选项未找到标记的位置

1 个答案: