программно удалять полигонные линии по умолчанию

Question

Я пытаюсь выяснить, чтобы удалить все линии многоугольника, которые появляются, когда слой таблицы слияния введен в карту Google.

Я знаю, что на стороне таблицы слияния можно сделать это, перейдя в «Изменить карту» и «Изменить стиль функции», установив ширину границы полигона равным 0px, но как это сделать программно?

Это то, что я пытался, stokeWeight: 0 не работает, не делает strokeOpacity или видимым.

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 
     } 
     }] 
}); 

Answer 1

Установите непрозрачность к действительно небольшой ненулевое число.

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 
     } 
    }] 
}); 

proof of concept fiddle

фрагмент кода:

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>