我想在谷歌地图中构建很多区域,并用多边形定义每个区域。如果我一个接一个地做,它可以正常工作(在初始化函数内):
name = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
fillOpacity: 0.05
});
//some event
//highlights polygon when mouseover
google.maps.event.addListener(name, 'mouseover', function () {
name.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
//then displaying it on the map:
name.setMap(map);
现在我想有一个函数来输入坐标来构建多边形,就像这样。但是只是调用该函数会阻止渲染其他多边形,所以我知道调用它有问题:
iName = new drawPolygon(polyName, coords);
iName.setMap(map);
该函数如下所示:
function drawPolygon(polyName, coords) {
polyName = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
//fillColor: 'green',
fillOpacity: 0.05
});
//highlights polygon when mouseover
google.maps.event.addListener(polyName, 'mouseover', function () {
polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
}
关于为什么的任何帮助,我怎么说错了?
drawPolygon 没有返回语句。它返回null
. null
没有 .setMap 方法。
扩展 geocodezip 的答案,只需向函数添加一个 return 语句即可。
function drawPolygon(polyName, coords) {
polyName = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
fillOpacity: 0.05
});
//highlights polygon when mouseover
google.maps.event.addListener(polyName, 'mouseover', function () {
polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
return polyName;
}
在这种情况下,我也倾向于不费心将polyName
作为参数传递到函数中。 在调用 drawPolygon 之前,您不必费心向我们展示创建 polyName 变量的代码。 但我假设你没有用它做任何特别聪明的事情,需要你这样做。
所以重构:
iName = new drawPolygon(coords);
iName.setMap(map);
function drawPolygon(coords) {
var polyName = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
fillOpacity: 0.05
});
//highlights polygon when mouseover
google.maps.event.addListener(polyName, 'mouseover', function () {
polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
return polyName;
}