以编程方式删除默认多边形线
programmatically remove default polygon lines
我想弄清楚一旦将融合 table 图层引入 Google 地图后出现的所有多边形线。
我知道在融合 table 方面可以通过将多边形边框宽度设置为 0px 进入 "Change Map" 和 "Change Feature Style" 来做到这一点,但我如何以编程方式做到这一点?
这是我一直在尝试的方法,stokeWeight: 0 不起作用,strokeOpacity 或 visible 也不起作用。
var layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
query: {
select: "col2\x3e\x3e0",
from: FusionTableID,
where: ""
},
styles: [{
polygonOptions: {
strokeWeight: 0,
strokeOpacity: 0,
visible: 0
}
},{
where: "impervious='A'",
polygonOptions: {
fillColor: '#e06666',
fillOpacity: 0.75
}
},{
where: "impervious='B'",
polygonOptions: {
fillColor: '#76a5af',
fillOpacity: 0.75
}
},{
where: "impervious='C'",
polygonOptions: {
fillColor: '#f6b26b',
fillOpacity: 0.75
}
}]
});
将不透明度设置为 真正 小的非零数字。
layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
map: map,
query: {
select: "kml_4326",
from: FusionTableID,
where: ""
},
styles: [{
polygonOptions: {
strokeWeight: 0,
strokeOpacity: 0.00001,
strokeColor: "#0000FF",
fillColor: "#0000FF"
}
}, {
where: "sov_a3='US1'",
polygonOptions: {
fillColor: '#e06666',
fillOpacity: 0.75
}
}, {
where: "sov_a3='CAN'",
polygonOptions: {
fillColor: '#76a5af',
fillOpacity: 0.75
}
}, {
where: "sov_a3='DN1'",
polygonOptions: {
fillColor: '#f6b26b',
fillOpacity: 0.75
}
}]
});
代码片段:
var layer;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}]
});
// 1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ
var FusionTableID = "1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ";
layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
map: map,
query: {
select: "kml_4326",
from: FusionTableID,
where: ""
},
styles: [{
polygonOptions: {
strokeWeight: 0,
strokeOpacity: 0.00001,
strokeColor: "#0000FF",
fillColor: "#0000FF"
}
}, {
where: "sov_a3='US1'",
polygonOptions: {
fillColor: '#e06666',
fillOpacity: 0.75
}
}, {
where: "sov_a3='CAN'",
polygonOptions: {
fillColor: '#76a5af',
fillOpacity: 0.75
}
}, {
where: "sov_a3='DN1'",
polygonOptions: {
fillColor: '#f6b26b',
fillOpacity: 0.75
}
}]
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" onclick="if (layer.getMap()==null) {layer.setMap(map)} else {layer.setMap(null)}" value="toggle" />
<div id="map_canvas"></div>
我想弄清楚一旦将融合 table 图层引入 Google 地图后出现的所有多边形线。
我知道在融合 table 方面可以通过将多边形边框宽度设置为 0px 进入 "Change Map" 和 "Change Feature Style" 来做到这一点,但我如何以编程方式做到这一点?
这是我一直在尝试的方法,stokeWeight: 0 不起作用,strokeOpacity 或 visible 也不起作用。
var layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
query: {
select: "col2\x3e\x3e0",
from: FusionTableID,
where: ""
},
styles: [{
polygonOptions: {
strokeWeight: 0,
strokeOpacity: 0,
visible: 0
}
},{
where: "impervious='A'",
polygonOptions: {
fillColor: '#e06666',
fillOpacity: 0.75
}
},{
where: "impervious='B'",
polygonOptions: {
fillColor: '#76a5af',
fillOpacity: 0.75
}
},{
where: "impervious='C'",
polygonOptions: {
fillColor: '#f6b26b',
fillOpacity: 0.75
}
}]
});
将不透明度设置为 真正 小的非零数字。
layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
map: map,
query: {
select: "kml_4326",
from: FusionTableID,
where: ""
},
styles: [{
polygonOptions: {
strokeWeight: 0,
strokeOpacity: 0.00001,
strokeColor: "#0000FF",
fillColor: "#0000FF"
}
}, {
where: "sov_a3='US1'",
polygonOptions: {
fillColor: '#e06666',
fillOpacity: 0.75
}
}, {
where: "sov_a3='CAN'",
polygonOptions: {
fillColor: '#76a5af',
fillOpacity: 0.75
}
}, {
where: "sov_a3='DN1'",
polygonOptions: {
fillColor: '#f6b26b',
fillOpacity: 0.75
}
}]
});
代码片段:
var layer;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}]
});
// 1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ
var FusionTableID = "1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ";
layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
map: map,
query: {
select: "kml_4326",
from: FusionTableID,
where: ""
},
styles: [{
polygonOptions: {
strokeWeight: 0,
strokeOpacity: 0.00001,
strokeColor: "#0000FF",
fillColor: "#0000FF"
}
}, {
where: "sov_a3='US1'",
polygonOptions: {
fillColor: '#e06666',
fillOpacity: 0.75
}
}, {
where: "sov_a3='CAN'",
polygonOptions: {
fillColor: '#76a5af',
fillOpacity: 0.75
}
}, {
where: "sov_a3='DN1'",
polygonOptions: {
fillColor: '#f6b26b',
fillOpacity: 0.75
}
}]
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" onclick="if (layer.getMap()==null) {layer.setMap(map)} else {layer.setMap(null)}" value="toggle" />
<div id="map_canvas"></div>