Question

我已经着手使用Polymer制作Google地图应用程序。但我遇到了困难，因为我想使用矢量地图标记而不是栅格地图标记。 icon =“dollar_sign.png”效果很好。 icon =“dollar_sign.svg”失败。

我在Google的地图标记文档中看到，我可以采取某些措施来容纳svg标记。但我不确定它们是如何与聚合物相互作用的。我有一位客户正在等待此申请。我不能花太多时间试验。

有没有人已经走过这条路了，可以告诉我是否会遇到路障？此时，我可以使用Polymer对其进行编码，或者在没有任何框架的情况下对其进行编码。

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

Answer 1

可以使用以下格式之一指定

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图标

＆＃13;

  google-map {
            height: 100vh;
        }

＆＃13;

<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>

＆＃13;

svg符号在聚合物谷歌地图标记中运作良好吗？

1 个答案: