我一直在尝试使用Javascript Google Maps API在Google Map 上创建用户标记（SVG图标用户图片） . 基本上，我想在一些定制设计的标记图像之上的圆形图像 .

尝试了这些方法：

  • Place an SVG marker带有一个圆形剪辑路径 - > didn 't work as images aren' t显示，我假设CORS错误或其他限制

  • Use Overlay Views在放置在同一个lon / lat上的标记之上，带有css的元素样式圆形 - >当标记重叠为标记并且叠加层位于不同的层时变得非常难看 . 此外，点击处理很困难 .

什么让我感到困惑的是，本机似乎有no problem将元素置于标记内，这些元素可以立即正确定位 .

例如 .

render() {      
    return <MapView>
        {this.state.imagemarker_workaround_cnt == 0 && 
        <MapView.Marker coordinate={{latitude: 0, longitude: 0}}>
            <View><Image source={require('./icon.png')} style={{width: 1, height: 1}} /></View>
        </MapView.Marker>}
    </MapView>;
}

我见过这个在React本机应用程序中工作 . 为什么我们不能为Web API做类似的事情？如果我可以在标记中放置自定义html元素，我可以使用css相应地设置它们 .

我无法相信基本（组合标记）不可能开箱即用的东西 . 目前，我正在研究是否可以组成图像服务器端的两个部分并提供一个URL . 但是，例如，Sharp库的圆形裁剪图像是不可能的 .

我真的很期待你的帮助 .

google-maps maps google-maps-markers