Question

我有一个具有某些功能的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。但是在实际网站上，该分区中已经有地图。

如何将多边形区域应用于现有地图，以便功能可以继续使用。

在SO上进行谷歌搜索和搜索无济于事

UPD：这是最小的可重现示例：我们在这里有一张地图，指向巴黎，然后在JS代码中添加了一些多边形：jsfiddle.net/lukoie/y7sf6dkt/7我需要在巴黎之前的地图上添加这些多边形，之前已对其进行了初始化。

如何在现有的Google Map实例中放置对象？

0 个答案: