我想在2个单独的图层上显示折线。 我找不到创建自定义窗格的方法。
理想情况下,我希望创建2个自定义窗格。将我的折线放在其中一个折线上,然后将其他折线放在第二个窗格上。之后,我需要切换第二个窗格以使其可见/不可见。 我现在可以放置折线的唯一方法是:
var polyline = new google.maps.Polyline({
path: line_points,
strokeColor: '#cdcdc4',
strokeOpacity: 1.0,
strokeWeight: 2.0,
});
polyline.setMap(map);
这样,我的折线就放置在默认窗格中:overlayLayer
。
我可以显示/隐藏这一层,但我需要另外一层。将来甚至可能再增加3-4层。
是否有一些变通方法来创建自己的自定义窗格? 谢谢。
答案 0 :(得分:1)
您可以使用数据层并分别切换要素的可见性。下面是一个简单的示例,其中我向ID为/c/Python37-32
的多边形和my_points
为面的多边形中添加了一些点。然后,您可以使用my_polygon
注册事件监听器,等等。
getFeatureById
function initMap() {
var myLatLng = new google.maps.LatLng(-24, 123);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var fc = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "my_points",
"geometry": {
"type": "MultiPoint",
"coordinates": [
[129.0, -22.0],
[131.0, -22.0],
[133.0, -22.0],
[135.0, -22.0],
[137.0, -22.0]
]
}
}, {
"type": "Feature",
"id": "my_polygon",
"properties": {
"letter": "G",
"polygon-bg-color": "blue",
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14],
[122.38, -21.73],
[121.06, -21.69],
[119.66, -22.22],
[119.00, -23.40],
[118.65, -24.76],
[118.43, -26.07],
[118.78, -27.56],
[119.22, -28.57],
[120.23, -29.49],
[121.77, -29.87],
[123.57, -29.64],
[124.45, -29.03],
[124.71, -27.95],
[124.80, -26.70],
[124.80, -25.60],
[123.61, -25.64],
[122.56, -25.64],
[121.72, -25.72],
[121.81, -26.62],
[121.86, -26.98],
[122.60, -26.90],
[123.57, -27.05],
[123.57, -27.68],
[123.35, -28.18],
[122.51, -28.38],
[121.77, -28.26],
[121.02, -27.91],
[120.49, -27.21],
[120.14, -26.50],
[120.10, -25.64],
[120.27, -24.52],
[120.67, -23.68],
[121.72, -23.32],
[122.43, -23.48],
[123.04, -24.04],
[124.54, -24.28],
[124.58, -23.20],
[123.61, -22.14]
]
]
}
}, {
"type": "Feature",
"id": "my_other_polygon",
"properties": {
"polygon-bg-color": "yellow",
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.61, -22.14],
[114.38, -21.73],
[113.06, -21.69],
[111.66, -22.22],
[111.00, -23.40],
[110.65, -24.76],
[110.43, -26.07],
[110.78, -27.56],
[111.22, -28.57],
[112.23, -29.49],
[113.77, -29.87],
[115.57, -29.64],
[116.45, -29.03],
[116.71, -27.95],
[116.80, -26.70],
[116.80, -25.60],
[115.61, -25.64],
[114.56, -25.64],
[113.72, -25.72],
[113.81, -26.62],
[113.86, -26.98],
[114.60, -26.90],
[115.57, -27.05],
[115.57, -27.68],
[115.35, -28.18],
[114.51, -28.38],
[113.77, -28.26],
[113.02, -27.91],
[112.49, -27.21],
[112.14, -26.50],
[112.10, -25.64],
[112.27, -24.52],
[112.67, -23.68],
[113.72, -23.32],
[114.43, -23.48],
[115.04, -24.04],
[116.54, -24.28],
[116.58, -23.20],
[115.61, -22.14]
]
]
}
}]
};
map.data.addGeoJson(fc);
var my_points = map.data.getFeatureById('my_points');
var my_polygon = map.data.getFeatureById('my_polygon');
// Updated to show setStyle method
map.data.setStyle(function(feature) {
var color;
if (feature.getProperty('polygon-bg-color')) {
color = feature.getProperty('polygon-bg-color');
}
return /** @type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
});
});
google.maps.event.addDomListener(document.getElementById('button1'), 'click', function() {
map.data.overrideStyle(my_points, {
visible: false
});
});
google.maps.event.addDomListener(document.getElementById('button2'), 'click', function() {
map.data.overrideStyle(my_points, {
visible: true
});
});
google.maps.event.addDomListener(document.getElementById('button3'), 'click', function() {
map.data.overrideStyle(my_polygon, {
visible: false
});
});
google.maps.event.addDomListener(document.getElementById('button4'), 'click', function() {
map.data.overrideStyle(my_polygon, {
visible: true
});
});
}
#map-canvas {
height: 110px;
}
文档:https://developers.google.com/maps/documentation/javascript/reference/data