在Google Maps API上删除GeoJSON绘制的多边形中的轮廓并增加不透明度

Question

I am working on something that leverages the Google Maps API to draw n number of polygons using GeoJSON. 我正在努力利用Google Maps API使用GeoJSON绘制n个多边形。 I was successful in drawing it, but I also want to increase the opacity of the polygons drawn, as well as remove an ugly outline on each of the polygons. 我已经成功地绘制了它，但是我还想增加绘制的多边形的opacity ，以及删除每个多边形上的难看轮廓。

I looked through the documentation on the Google Maps API here , but it only tells you how to load the GeoJSON file, not modify traits of the drawn polygons. 我在这里浏览了Google Maps API上的文档，但它仅告诉您如何加载GeoJSON文件，而不修改已绘制多边形的特征。

map.data.loadGeoJson('google.json');

That up there is how you load the GeoJSON and the only command that you can use. 到那里就是如何加载GeoJSON以及唯一可以使用的命令。 I know it seems that I haven't tried anything, but I have and none of it's substantial enough to include in this question. 我知道似乎我还没有尝试过任何东西，但是我已经尝试过了，而且都没有足够的实质性内容可以涵盖此问题。

So my question is - How do you remove the outline from GeoJSON drawn images and also increase the opacity? 所以我的问题是-如何从GeoJSON绘制的图像中删除轮廓并增加不透明度？

Below is also an image of what it currently looks like: 以下也是当前外观的图像：

Answer 1

use fillOpacity: 1 and strokeWeight: 0 in style options 在样式选项中使用fillOpacity: 1和strokeWeight: 0

https://plnkr.co/edit/puMK8mAskLiaExmNKIEI?p=preview https://plnkr.co/edit/puMK8mAskLiaExmNKIEI?p=preview

 <!DOCTYPE html> <html> <head> <title>Data Layer: Styling</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -28, lng: 137} }); // Load GeoJSON. map.data.loadGeoJson( 'https://storage.googleapis.com/mapsdevsite/json/google.json'); // Set the stroke width, and fill color for each polygon map.data.setStyle(function(feature) { var color = feature.getProperty('color'); return { fillColor: color, fillOpacity: 1, strokeWeight: 0 }; }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> </script> </body> </html>

在Google Maps API上删除GeoJSON绘制的多边形中的轮廓并增加不透明度

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-03-26 23:04:52

在Google Maps API上删除GeoJSON绘制的多边形中的轮廓并增加不透明度

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-26 23:04:52

解决方案1
2 已采纳 2018-03-26 23:04:52