我已经着手使用Polymer制作Google地图应用程序。但我遇到了困难,因为我想使用矢量地图标记而不是栅格地图标记。 icon =“dollar_sign.png”效果很好。 icon =“dollar_sign.svg”失败。
我在Google的地图标记文档中看到,我可以采取某些措施来容纳svg标记。但我不确定它们是如何与聚合物相互作用的。我有一位客户正在等待此申请。我不能花太多时间试验。
有没有人已经走过这条路了,可以告诉我是否会遇到路障?此时,我可以使用Polymer对其进行编码,或者在没有任何框架的情况下对其进行编码。
.........谢谢,里克
答案 0 :(得分: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图标
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>
&#13;