Как поместить объект в существующий экземпляр карты Google? - PullRequest
0 голосов
/ 28 июня 2019

У меня есть экземпляр googlemap с некоторыми функциями, включая геозонирование с помощью булавки.И я хочу поместить область на этой самой карте.Но когда я помещаю многоугольник на эту карту, остальные функции перестают работать.

Когда я смотрю в Chrome инспектор на вкладке сети (нажимая кнопку, которая должна поставить булавку на карту),Я вижу, что булавка загружается (http://ge.tt/1AxeQqw2), но она не отображается на карте.Вот код для полигонов области (он работает на JSFiddle): https://jsfiddle.net/lukoie/y7sf6dkt/3/

jQuery(document).ready(function(){
	

	jQuery(function(){
		initialize_802();
	});

	function initialize_802() {

		var mapOptions = {
			center: new google.maps.LatLng(49.932687399966596, 24.138469076710862),
			zoom: 12,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false,
			zoomControl: true,
    		zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT }
		};

		map_802 = new google.maps.Map(document.getElementById('location-map'), mapOptions);

	
		polygon = new google.maps.Polygon({
        	paths: [new google.maps.LatLng(49.83482093251708,24.00745755733783),
					new google.maps.LatLng(49.834668691656496,24.01044017376239),
					new google.maps.LatLng(49.83468163317098,24.01642686428363),
					new google.maps.LatLng(49.83234573648944,24.01817330813242),
					new google.maps.LatLng(49.83052227115497,24.02238622670086),
					new google.maps.LatLng(49.82751825988998,24.021263212917574),
					new google.maps.LatLng(49.82484701069452,24.0208627319804),
					new google.maps.LatLng(49.8198930845756,24.020356816967933),
					new google.maps.LatLng(49.80621295482899,24.01896986257634),
					new google.maps.LatLng(49.79646281061658,24.01673826467595),
					new google.maps.LatLng(49.79779249135623,24.005322783108568),
					new google.maps.LatLng(49.79862352327725,23.997168867703294),
					new google.maps.LatLng(49.79983761374021,23.9860517033801),
					new google.maps.LatLng(49.80094560633301,23.98356261341428),
					new google.maps.LatLng(49.801001005297074,23.981331015513888),
					new google.maps.LatLng(49.801277999166594,23.9750653752551),
					new google.maps.LatLng(49.8043248271423,23.969743872569552),
					new google.maps.LatLng(49.809950259159216,23.969613497943328),
					new google.maps.LatLng(49.81894476898493,23.960471865626914),
					new google.maps.LatLng(49.82127060581243,23.953519579860313),
					new google.maps.LatLng(49.82381782262788,23.948283907863242),
					new google.maps.LatLng(49.826767781165756,23.947702414403693),
					new google.maps.LatLng(49.83705922652335,24.003875609730812),
					new google.maps.LatLng(49.835701065597625,24.004888001101563)],
        	strokeColor: '#0aa',
        	strokeOpacity: 0.8,
        	strokeWeight: 3,
        	fillColor: '#0aa',
        	fillOpacity: 0.35
    	});
		var shapes = [];
		var path = [
					new google.maps.LatLng(49.87643969017705, 24.041706281925485),
					new google.maps.LatLng(49.874946227771574, 24.060760694767282),
					new google.maps.LatLng(49.87068684055065, 24.06608219745283),
					new google.maps.LatLng(49.86011972588066, 24.067455488468454),
					new google.maps.LatLng(49.85315094295094, 24.063502509879527),
					new google.maps.LatLng(49.8487236010333, 24.035521705436167),
					new google.maps.LatLng(49.846620471548064, 24.02247544078773),
					new google.maps.LatLng(49.84770665887347, 24.011584346754717),
					new google.maps.LatLng(49.85423525421419, 24.000919883711504),
					new google.maps.LatLng(49.865552233683765, 24.000930752010845),
					new google.maps.LatLng(49.87569948985104, 24.012125763862286)];
var polyline = new google.maps.Polygon({path:path, strokeColor: "#0aa", strokeOpacity: 1.0, strokeWeight: 2, fillColor: '#0aa', fillOpacity: 0.35});
polyline.setMap(map_802);
map_802.setCenter(new google.maps.LatLng(49.84396,24.025248));
shapes.push(polyline);
    	
    	polygon.setMap(map_802);

	}


	google.maps.Polygon.prototype.getBounds = function() {
    	var bounds = new google.maps.LatLngBounds();
    	var paths = this.getPaths();
    	var path;        
    	
    	for (var i = 0; i < paths.getLength(); i++) {
			path = paths.getAt(i);
			
			for (var ii = 0; ii < path.getLength(); ii++) {
				bounds.extend(path.getAt(ii));
			}
		}
	
		return bounds;
	}

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="location-map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Как видите, я применяю полигоны к div # ID.Но на реальном сайте карта уже есть, в этом разделе.

Как применить области многоугольника к существующей карте, чтобы функции продолжали работать.

поиск в Google ипоиск по SO не помог

UPD: вот минимальный воспроизводимый пример: у нас есть карта, указывающая на Париж, а затем код JS, добавляющий несколько полигонов: jsfiddle.net/lukoie/y7sf6dkt/7Мне нужно добавить те многоугольники на карте с Парижем, которые были инициализированы ранее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...