Google Maps API MarkerOptions图标SVG不是网址

时间:2017-08-01 23:12:06

标签: google-maps reactjs svg

Google Maps API的MarkerOptions对象规范(google.maps.MarkerOptions)图标属性类型:字符串仅被视为具有字符串作为网址的图标。

这周围有吗?我有一个svg由于传入的数据和逻辑而动态变化,因此在这里有一个SVG字符串,但它不是一个url而不是svg文件中导入的url。

我可以以某种方式覆盖MarkerOptions图标属性吗?

此处输入的代码太多,但这里是markers数组中的一个对象:

const markers = [
  {
    position: {lat: 28.3422, lng: -80.6112},
    key: 'Truckee',
    defaultAnimation: 0,
    valuationType: 'VALUE_CONCLUSION',
    showInfo: false,
    infoContent: infoContent,
    icon: iconService(valuation)
  }

如果图标值为'/static/media/comparable-sale.cb717259.svg',标记将使用该图像呈现,但如果iconService(评估)返回的字符串不是网址:

<svg width=22 px height=26 px viewBox=0 0 22 26><g stroke=none strokeWidth=1 fill=none fillRule=evenodd><path d=M10.5,24 C11.2054469,24 20,15.5173578 20,10.3522518 C20,5.18714574 15.7467051,1 10.5,1 C5.25329488,1 1,5.18714574 1,10.3522518 C1,15.5173578 9.79455308,24 10.5,24 Z stroke=#FFC220 strokeWidth=1.5 fill=#FFC220></path> <textfill=#FFC220 x=50% y=50% textAnchor=middle fontWeight=700 fontSize=12px transform=translate(-0.3, 2.5) fontFamily='Lato', sans-serif> null</text></g></svg>

它不会将图标渲染为标记,并且标记仍保留在那里但没有SVG样式。

1 个答案:

答案 0 :(得分:0)

您可以使用从iconService(valuation)返回的路径将Symbol对象传递到标记的icon属性。