Вопрос:

Обновление радиуса нескольких кругов в Google Maps?

javascript google-maps

515 просмотра

1 ответ

894 Репутация автора

У меня есть карта, которая показывает Круг с радиусом 50 миль вокруг каждого набора координат в моем массиве местоположений. Я хочу иметь ряд кнопок для увеличения или уменьшения радиуса каждого круга на карте при нажатии. Как я сейчас понимаю, это только изменение радиуса круга, связанного с последним местоположением в моем массиве. Я понимаю, почему это происходит (потому что переменная окружности присваивается каждой точке в forцикле), но я не уверен, как изменить ее так, чтобы радиус каждого круга обновлялся.

var retailerCircle;
var retailermap = {
	chicago: {
		coords: {lat: 41.878, lng: -87.629}
	},
	newyork: {
		coords: {lat: 40.714, lng: -74.005}
	},
	losangeles: {
		coords: {lat: 34.052, lng: -118.243}
	},
	vancouver: {
		coords: {lat: 49.25, lng: -123.1}
	}
};

function initMap() {
	// Create the map.
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 4,
		center: {lat: 41.878003, lng: -93.097702},
		mapTypeId: 'terrain'
	});

	for (var retailer in retailermap) {
		// Add the circle for this retailer to the map.
		retailerCircle = new google.maps.Circle({
			strokeColor: '#FF0000',
			strokeOpacity: 0.8,
			strokeWeight: 2,
			fillColor: '#FF0000',
			fillOpacity: 0.35,
			map: map,
			center: retailermap[retailer].coords,
			radius: 80467.2 // 50 miles
		});
	}
}

function updateRadius(circle, rad){
	circle.setRadius(rad);
}

$(function() {
	$('button').click(function(e) {
		e.preventDefault();
		updateRadius(retailerCircle, 160934); // 100 miles
	});
});
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<button>CLICK ME</button>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Автор: user13286 Источник Размещён: 22.08.2016 09:13

Ответы (1)


1 плюс

134378 Репутация автора

Решение

Сохраните ссылки на все круги (в массиве будет один вариант), затем выполните итерацию по этому массиву, обновляя радиус.

function updateRadius(circle, rad) {
  for (var i = 0; i < circles.length; i++) {
    circles[i].setRadius(rad);
  }
}

фрагмент кода:

var retailerCircle;
var circles = [];
var retailermap = {
  chicago: {
    coords: {
      lat: 41.878,
      lng: -87.629
    }
  },
  newyork: {
    coords: {
      lat: 40.714,
      lng: -74.005
    }
  },
  losangeles: {
    coords: {
      lat: 34.052,
      lng: -118.243
    }
  },
  vancouver: {
    coords: {
      lat: 49.25,
      lng: -123.1
    }
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 41.878003,
      lng: -93.097702
    },
    mapTypeId: 'terrain'
  });

  for (var retailer in retailermap) {
    // Add the circle for this retailer to the map.
    var retailerCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: retailermap[retailer].coords,
      radius: 80467.2 // 50 miles
    });
    circles.push(retailerCircle);
  }
}

function updateRadius(circle, rad) {
  for (var i = 0; i < circles.length; i++) {
    circles[i].setRadius(rad);
  }
}

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    updateRadius(retailerCircle, 160934); // 100 miles
  });
});
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<button>CLICK ME</button>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Автор: geocodezip Размещён: 22.08.2016 09:33
Вопросы из категории :
32x32