谷歌地图地理JSON功能触发点击事件

我有一个特征集合，其对应的ID如下所示：

"type"=>"Feature",
"id"=>"test_1",
"properties"=>array("desc"=>...

并希望从文档上的按钮触发单击事件，以便打开信息窗口。

var featId = 'test_1';
map.event.trigger(featId, 'click');

但我得到了

Uncaught TypeError: Cannot read property 'trigger' of undefined

当我单击地图上的多边形时，信息窗口将打开。

这是一个JS小提琴。我还使用stackoverflow的编辑器添加了一个代码片段。

var mygeojson={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
'id':'test_2',
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
0.5767822265625,
46.437856895024204
],
[
0.560302734375,
46.160809861457125
],
[
0.9118652343749999,
46.10370875598026
],
[
1.42822265625,
46.22545288226939
],
[
0.9118652343749999,
46.581518465658014
],
[
0.5767822265625,
46.437856895024204
]
]
]
}
},
{
"type": "Feature",
'id':'test_1',
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
1.9335937499999998,
46.98774725646568
],
[
1.8841552734374998,
46.73233101286786
],
[
2.581787109375,
46.53619267489863
],
[
2.8784179687499996,
46.71350244599995
],
[
3.065185546875,
47.00647991252098
],
[
2.3785400390625,
47.18597932702905
],
[
2.1917724609375,
47.60986653003798
],
[
1.9335937499999998,
46.98774725646568
]
]
]
}
}
]
};
function openinfo(target_featId)
{
	//map.event.trigger(featId, 'click');
google.maps.event.trigger(map, 'click');
}
initpage = function() 
{
	var selected_id = 0;
	console.log('html loaded');
	//center lat/lon
	var latlng = new google.maps.LatLng(46.315,0.467);

	//map configutations
	var myOptions = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: true,
		
	};

	map = new google.maps.Map(document.getElementById("themap"), myOptions);
	map.data.addGeoJson(mygeojson);
	
	map.data.setStyle(function(feature) {
		//var SD_NAME = feature.getProperty('SD_NAME');
		//var color = feature.getProperty('boja');
		var featId = feature.getId();
		var color = 'gray';
		
		if(selected_id == featId)
		{
			color='#009900';
			console.log('setting green for '+featId)
		} else
		{
			color = 'gray';
			console.log('setting gray for '+featId)
		}
		return {
		  fillColor: color,
		  strokeColor: color,
		  strokeWeight: 1
		}
		
	});
	
	var infowindow = new google.maps.InfoWindow();
	
	map.data.addListener('click', function(event) {
	//var feat_desc = event.feature.getProperty("desc");
var featId = event.feature.getId();
		map.data.forEach(function(feature2) {
			if(featId == selected_id) feature2.setProperty('color','gray');
		});

		selected_id = featId;
		var color = '#009900';
		infowindow.setContent("<div style='width:150px; color: #000;'> litttle test "+featId+"</div>");
		// position the infowindow on the marker
		infowindow.setPosition(event.feature.getGeometry().getAt(0).getAt(0));
		infowindow.open(map);
	});
}

html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; background: #fff; color: #bbb; font-size: 13px; font-family: Arial;}
#themap { height:100%; }

<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
</head>
<body onload="initpage()">

&nbsp;&nbsp;
<a href="#" onclick="openinfo('test_1')">Open poly 1</a> &nbsp;&nbsp;
<a href="#" onclick="openinfo('test_2')">Open poly 2</a><br /><br />
<div id="themap">
</div>
</body>
</html>

我已经通过使用成功解决此问题：

function openinfo(target_featId)
{
google.maps.event.trigger(map.data,'click',target_featId);
}

然后addListener函数出现了一个新问题。 event.feature未定义，所以我用：if(!event.feature) event.feature=event;在map.data.addListener('click', function(event) {里面

相关内容

最新更新

热门标签：