在多边形 google 地图中添加多个 AddListener
adding multiple AddListener in polygons google map
我在 google 地图上添加了一些来自 geojson 数据的多边形和多边形。
我的需要是当事件 "mousemove" 在多边形中时在信息窗口中打印出国家名称。我还设置了一个图例,我想在事件 "dblclick" 出现在多边形上时重新加载它。
这是我的问题:我无法对所有多边形和多边形执行 "mousemove" 和 "dblclick" 事件,它只采用我的函数投射的最后一个多边形和多边形。
这是我的完整代码(更新):
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var countries = ['Germany','France','Moldova','Italy','Spain'];
var infoWindow = document.createElement('div');
infoWindow.id = 'infoWindow';
var content1 = [];
content1.push('<h3>Default </h3>');
infoWindow.innerHTML = content1.join('');
infoWindow.index = 2;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(infoWindow);
var state = new google.maps.Data();
var poly ;
var polys = new Array();
var gaArr = new Array();
var p = 0;
var mp = 0;
//the problem is here
state.addListener('addfeature',function(evt) {
//my 5 objects pass here
var CouName = evt.feature.getProperty('name');
if (evt.feature.getProperty('type') == 'Polygon') {
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getAt(0).getArray();
poly = new google.maps.Polygon({paths:gaArr, map:map,clickable:false,visible:false});
google.maps.event.addListener(map,'dblclick',function(evt){
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
legend.innerHTML = CouName;
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
infoWindow.innerHTML = CouName;
}
});
p++;
}
if (evt.feature.getProperty('type') == 'MultiPolygon') {
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getArray();
for (var i=0;i<gaGeom.getArray().length;i++){
polys[i]= new google.maps.Polygon({paths:gaArr[i].getAt(0).getArray(), map:map,clickable:false,visible:false});
}
google.maps.event.addListener(map,'dblclick',function(evt){
for(var i=0;i<gaArr.length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
legend.innerHTML = CouName;
}
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
for(var i=0;i<gaArr.length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
infoWindow.innerHTML = CouName;
}
}
});
mp++;
}
});
for (var country in countries){
state.loadGeoJson('http://.../GoogleMaps/'+countries[country]+'.geojson', {
idPropertyName: 'name'
});
}
state.setMap(map);
//to color the polygons
state.setStyle(function(feature) {
var k = feature.getProperty('color');
return {
fillOpacity:0.6,
fillColor:k,
strokeWeight:1,
clickable: false
}
});
我认为问题是多边形数组多边形和多边形多边形在 state.addListener 传递到另一个多边形或多边形时被删除,正如我所说,addlistener 适用于最后一个多边形和多边形函数。
我不知道它是否有帮助,但下面是我的 geojson 文件的示例:
{"type":"Feature","properties":{"color":"purple","name":"Germany","type":
"MultiPolygon"},"geometry":{"type": "MultiPolygon","coordinates":
[[[[8.5636100769042969,54.684165954589844],
[8.5948600769042969,54.719856262207031],[8.5851364135742187,54.7445068359375],
[8.5511093139648437,54.753883361816406],[8.4447212219238281,54.74832...]]]]}}
{"type":"Feature","properties":{"name": "Moldova","color":"green","type":
"Polygon"},"geometry":{"type": "Polygon","coordinates":
[[[28.108325958251953,46.102291107177734],[28.0...]]]]}}
我想过在所有多边形和多边形上循环并制作一个多边形数组和一个多边形数组,但它没有用。
我找到了答案。我在下面更新 state.addListener:
state.addListener('addfeature',function(evt) {
var CouName = evt.feature.getProperty('name');
if (evt.feature.getProperty('type') == 'Polygon') {
var c = p;
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getAt(0).getArray();
//here I push all my polygons in my array poly
poly.push(new google.maps.Polygon({paths:gaArr, map:map,clickable:false,visible:false}));
google.maps.event.addListener(poly[c],'dblclick',function(evt){
alert(poly.length);
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly[c])) {
legend.innerHTML = CouName;
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly[c])) {
infoWindow.innerHTML = CouName;
}
});
p++;
}
if (evt.feature.getProperty('type') == 'MultiPolygon') {
var cp= mp;
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getArray();
for (var i=0;i<gaGeom.getArray().length;i++){
//here I push all my polygons of my multipolygons in my array polys
polys.push(new google.maps.Polygon({paths:gaArr[i].getAt(0).getArray(), map:map,clickable:false,visible:false}));
}
google.maps.event.addListener(map,'dblclick',function(evt){
for(var i=cp;i<cp+gaGeom.getArray().length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
legend.innerHTML = CouName;
}
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
for (var i=cp;i<cp+gaGeom.getArray().length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
infoWindow.innerHTML = CouName;
}
}
});
mp=mp+gaGeom.getArray().length;
}
});
我在 google 地图上添加了一些来自 geojson 数据的多边形和多边形。 我的需要是当事件 "mousemove" 在多边形中时在信息窗口中打印出国家名称。我还设置了一个图例,我想在事件 "dblclick" 出现在多边形上时重新加载它。
这是我的问题:我无法对所有多边形和多边形执行 "mousemove" 和 "dblclick" 事件,它只采用我的函数投射的最后一个多边形和多边形。
这是我的完整代码(更新):
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var countries = ['Germany','France','Moldova','Italy','Spain'];
var infoWindow = document.createElement('div');
infoWindow.id = 'infoWindow';
var content1 = [];
content1.push('<h3>Default </h3>');
infoWindow.innerHTML = content1.join('');
infoWindow.index = 2;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(infoWindow);
var state = new google.maps.Data();
var poly ;
var polys = new Array();
var gaArr = new Array();
var p = 0;
var mp = 0;
//the problem is here
state.addListener('addfeature',function(evt) {
//my 5 objects pass here
var CouName = evt.feature.getProperty('name');
if (evt.feature.getProperty('type') == 'Polygon') {
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getAt(0).getArray();
poly = new google.maps.Polygon({paths:gaArr, map:map,clickable:false,visible:false});
google.maps.event.addListener(map,'dblclick',function(evt){
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
legend.innerHTML = CouName;
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly)) {
infoWindow.innerHTML = CouName;
}
});
p++;
}
if (evt.feature.getProperty('type') == 'MultiPolygon') {
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getArray();
for (var i=0;i<gaGeom.getArray().length;i++){
polys[i]= new google.maps.Polygon({paths:gaArr[i].getAt(0).getArray(), map:map,clickable:false,visible:false});
}
google.maps.event.addListener(map,'dblclick',function(evt){
for(var i=0;i<gaArr.length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
legend.innerHTML = CouName;
}
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
for(var i=0;i<gaArr.length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
infoWindow.innerHTML = CouName;
}
}
});
mp++;
}
});
for (var country in countries){
state.loadGeoJson('http://.../GoogleMaps/'+countries[country]+'.geojson', {
idPropertyName: 'name'
});
}
state.setMap(map);
//to color the polygons
state.setStyle(function(feature) {
var k = feature.getProperty('color');
return {
fillOpacity:0.6,
fillColor:k,
strokeWeight:1,
clickable: false
}
});
我认为问题是多边形数组多边形和多边形多边形在 state.addListener 传递到另一个多边形或多边形时被删除,正如我所说,addlistener 适用于最后一个多边形和多边形函数。
我不知道它是否有帮助,但下面是我的 geojson 文件的示例:
{"type":"Feature","properties":{"color":"purple","name":"Germany","type":
"MultiPolygon"},"geometry":{"type": "MultiPolygon","coordinates":
[[[[8.5636100769042969,54.684165954589844],
[8.5948600769042969,54.719856262207031],[8.5851364135742187,54.7445068359375],
[8.5511093139648437,54.753883361816406],[8.4447212219238281,54.74832...]]]]}}
{"type":"Feature","properties":{"name": "Moldova","color":"green","type":
"Polygon"},"geometry":{"type": "Polygon","coordinates":
[[[28.108325958251953,46.102291107177734],[28.0...]]]]}}
我想过在所有多边形和多边形上循环并制作一个多边形数组和一个多边形数组,但它没有用。
我找到了答案。我在下面更新 state.addListener:
state.addListener('addfeature',function(evt) {
var CouName = evt.feature.getProperty('name');
if (evt.feature.getProperty('type') == 'Polygon') {
var c = p;
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getAt(0).getArray();
//here I push all my polygons in my array poly
poly.push(new google.maps.Polygon({paths:gaArr, map:map,clickable:false,visible:false}));
google.maps.event.addListener(poly[c],'dblclick',function(evt){
alert(poly.length);
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly[c])) {
legend.innerHTML = CouName;
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
if (google.maps.geometry.poly.containsLocation(evt.latLng, poly[c])) {
infoWindow.innerHTML = CouName;
}
});
p++;
}
if (evt.feature.getProperty('type') == 'MultiPolygon') {
var cp= mp;
var ga = state.getFeatureById(CouName);
var gaGeom = ga.getGeometry();
gaArr = gaGeom.getArray();
for (var i=0;i<gaGeom.getArray().length;i++){
//here I push all my polygons of my multipolygons in my array polys
polys.push(new google.maps.Polygon({paths:gaArr[i].getAt(0).getArray(), map:map,clickable:false,visible:false}));
}
google.maps.event.addListener(map,'dblclick',function(evt){
for(var i=cp;i<cp+gaGeom.getArray().length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
legend.innerHTML = CouName;
}
}
});
google.maps.event.addListener(map,'mousemove',function(evt){
for (var i=cp;i<cp+gaGeom.getArray().length;i++){
if (google.maps.geometry.poly.containsLocation(evt.latLng, polys[i])) {
infoWindow.innerHTML = CouName;
}
}
});
mp=mp+gaGeom.getArray().length;
}
});