Javascript Google Maps API-基于复选框状态加载GeoJSON

我有这个谷歌地图覆盖文件

覆盖-

函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：{lat:49.656963，lng:-112.506664}，
手势处理：'贪婪'，
mapTypeControl:false
});
//加载GeoJson数据并选择多边形颜色
map.data.loadGeoJson(
'https://api.myjson.com/bins/ge7q4');
map.data.setStyle（函数myFunction（功能）{
var checkBox=document.getElementById（“overlayid”）；
如果（checkBox.checked==true）{
返回{
fillColor:feature.getProperty（'COLOR'），
冲程重量：1，
strokeColor:'白色'，
填充不透明度：0.4，
笔划不透明度：0.7，
zIndex:0
};
}否则{
返回{
fillColor:feature.getProperty（'COLOR'），
冲程重量：1，
strokeColor:'黑色'，
填充不透明度：0.4，
笔划不透明度：0.7，
zIndex:0
};
}
});		  
//信息窗口
var infoWindow=new google.maps.infoWindow({
zIndex:2
});
map.data.addListener（'click'，函数（事件）{
map.data.revertStyle（）；
overrideStyle（event.feature，{strokeWeight:2，strokeColor:'black'，zIndex:1}）；
var CDNAME=event.feature.getProperty（'CDNAME'）；
var COLOR=event.feature.getProperty（'COLOR'）；
infoWindow.setPosition（event.latLng）；
infoWindow.setOptions（{
像素偏移：{宽度：0，高度：-3}
});
infoWindow.setContent(
“CDNAME:”+CDNAME+“
“+
“颜色：”+颜色+“”
);	
打开（地图）；
});
map.data.addListener（'clickout'，函数（事件）{
map.data.revertStyle（）；
infoWindow.close（）；
});
map.data.addListener（'mouseover'，函数（事件）{
map.data.revertStyle（）；
overrideStyle（event.feature，{strokeWeight:2，strokeColor:'black'，zIndex:1}）；
});
var标记=[]；
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
如果（！place.geometry）{
log（“返回的位置不包含几何图形”）；
返回；
}
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
});
}

/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}	

边框颜色

我收到一个javascript错误，发布的代码

未捕获引用错误：未定义myFunction

。要在HTML元素（您的复选框）的click listener中使用该函数，需要在全局范围中定义它。它也不能接受任何参数。我建议：

将该函数重命名为

styleFunc

，并将其移出

initAutocomplete

函数：

创建另一个函数（

stylFeatures

），用于设置GeoJson数据层中所有对象的样式，在复选框的onclick事件中调用该函数：

在HTML中调用：

代码片段：

var映射；
函数initAutocomplete（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：{
拉丁美洲：49.656963，
液化天然气：-112.506664
},
手势处理：'贪婪'，
mapTypeControl:false
});
//加载GeoJson数据并选择多边形颜色
map.data.loadGeoJson(
'https://api.myjson.com/bins/ge7q4');
map.data.setStyle（styleFunc）；
//信息窗口
var infoWindow=new google.maps.infoWindow({
zIndex:2
});
map.data.addListener（'click'，函数（事件）{
map.data.revertStyle（）；
map.data.overrideStyle（event.feature{
冲程重量：2，
strokeColor:'黑色'，
zIndex:1
});
var CDNAME=event.feature.getProperty（'CDNAME'）；
var COLOR=event.feature.getProperty（'COLOR'）；
infoWindow.setPosition（event.latLng）；
infoWindow.setOptions({
像素偏移：{
宽度：0，
身高：-3
}
});
infoWindow.setContent(
“CDNAME:+CDNAME+”
”+
“颜色：”+颜色+“”
);
打开（地图）；
});
map.data.addListener（'clickout'，函数（事件）{
map.data.revertStyle（）；
infoWindow.close（）；
});
map.data.addListener（'mouseover'，函数（事件）{
map.data.revertStyle（）；
map.data.overrideStyle（event.feature{
冲程重量：2，
strokeColor:'黑色'，
zIndex:1
});
});
}
函数styleFunc（功能）{
var checkBox=document.getElementById（“overlayid”）；
如果（checkBox.checked==true）{
返回{
fillColor:feature.getProperty（'COLOR'），
冲程重量：1，
strokeColor:'白色'，
填充不透明度：0.4，
笔划不透明度：0.7，
zIndex:0
};
}否则{
返回{
fillColor:功能。
function styleFunc(feature) {
  var checkBox = document.getElementById("overlayid");
  if (checkBox.checked == true) {
    return {
      fillColor: feature.getProperty('COLOR'),
      strokeWeight: 1,
      strokeColor: 'white',
      fillOpacity: 0.4,
      strokeOpacity: 0.7,
      zIndex: 0
    };
  } else {
    return {
      fillColor: feature.getProperty('COLOR'),
      strokeWeight: 1,
      strokeColor: 'black',
      fillOpacity: 0.4,
      strokeOpacity: 0.7,
      zIndex: 0
    };
  }
}

function styleFeatures() {
  map.data.setStyle(styleFunc);
}