SVG符号在聚合物Google-Map-Marker中效果很好

我已经着手使用聚合物制作Google Maps应用程序。但是我遇到了困难，因为我想使用矢量映射标记，而不是栅格地图标记。图标=" Dollar_Sign.png"效果很好。图标=" dollar_sign.svg"失败。

我在Google的地图标记文档中看到，我可以采取某些事情来适应SVG标记。但是我不确定它们如何与聚合物相互作用。我有一个客户等待此应用程序。我无力花很多时间进行实验。

有人已经走过这条路了，可以告诉我我是否会遇到障碍？此时，我可以使用聚合物进行编码，也可以无需任何框架编码。

.........谢谢，里克

Icon属性可以使用以下格式之一指定：

1）string值，例如：http://www.primeracoop.com/assets/pin.svg

2）google.maps.Icon对象，例如：

{
    url: 'http://www.primeracoop.com/assets/pin.svg',
    anchor: { x: 25, y: 50 },
    scaledSize: { height: 50, width: 50 }
}

3）google.maps.Symbol对象，例如：

{
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: { x: 0, y: 0 },
    strokeWeight: 0,
    scale: 1
}

以下示例演示了如何设置SVG图标

  google-map {
            height: 100vh;
        }

<head>
    <base href="https://polygit.org/polymer+1.6.0/components/">
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="google-map/google-map.html">
    <link rel="import" href="google-map/google-map-marker.html">
</head>
<body>
 
    <google-map-svg-marker></google-map-svg-marker>
    <dom-module id="google-map-svg-marker">
        <template>
            <google-map latitude="37.77493" longitude="-122.41942">
                <google-map-marker icon="{{icon}}" latitude="37.779" longitude="-122.3892" title="Go Giants!"></google-map-marker>
            </google-map>
        </template>
        <script>
            HTMLImports.whenReady(function () {
                Polymer({
                    is: 'google-map-svg-marker',
                    ready: function () {
                        //this.icon = "http://www.primeracoop.com/assets/pin.svg";
                        this.icon = {
                            url: 'http://www.primeracoop.com/assets/pin.svg',
                            anchor: { x: 25, y: 50 },
                            scaledSize: { height: 50, width: 50 }
                        };
                        /*this.icon = {
                            path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
                            fillColor: '#FF0000',
                            fillOpacity: .6,
                            anchor: { x: 0, y: 0 },
                            strokeWeight: 0,
                            scale: 1
                        };*/
                    },
                    properties: {
                        icon: {
                            type: Object
                        }
                    }
                })
            });
        </script>
    </dom-module>
</body>

相关内容

最新更新

热门标签：