虚线多边形谷歌地图

Question

I'm asking because I've searched everywhere online and this is all I have been able to find. So far I've been able to make dashed lines on google maps with the following code.

app.config.dashSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4,
},

 new google.maps.Polyline({
            map:map,
            path:polygon.getPath ? polygon.getPath() : polygon,
            strokeColor: vue.Projects[projectID].ContractorColor,
            strokeOpacity:0,
            icons:[{
                icon:app.config.dashSymbol,
                offset:'0',
                repeat:'20px'
            }],
        })

That all works fine, but is there a way that I can make a Polygon object with a dashed outline? I tried this, by it doesn't work

new google.maps.Polygon({
            map:map,
            paths:polygon.getPath ? polygon.getPath() : polygon,
            fillColor: vue.Projects[projectID].ContractorColor,
            strokeColor:vue.Projects[projectID].ContractorColor,
            strokeOpacity:0,
            icons:[{
                icon:app.config.dashSymbol,
                offset:'0',
                repeat:'20px'
            }]
        })

Answer 1

I don't think you can. But you could overlay a Polyline on top of the Polygon.

 function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(40, 9), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var path = [ new google.maps.LatLng(39, 4), new google.maps.LatLng(34, 20), new google.maps.LatLng(44, 20), new google.maps.LatLng(39, 4) ]; var lineSymbol = { path: google.maps.SymbolPath.CIRCLE, fillOpacity: 1, scale: 2 }; var polygon = new google.maps.Polygon({ strokeOpacity: 0, strokeWeight: 0, fillColor: '#00FF00', fillOpacity: .6, paths: path, map: map }); var polylineDotted = new google.maps.Polyline({ strokeColor: '#000000', strokeOpacity: 0, icons: [{ icon: lineSymbol, offset: '0', repeat: '10px' }], path: path, map: map }); } initialize();

 #map-canvas { height: 180px; }

 <div id="map-canvas"></div> <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>