自定义 Google 地图标记图标
Custom Google map marker icon
所以我使用 gmap3 根据用户图像个人资料照片动态加载我的地图标记图标。理想情况下,我希望在标记图标图像上有一些自定义样式,并且每个标记图标图像因用户而异。
以下是我遇到的两个难点:
Google 将加载标记图标映射为 canvas(如果我错了请纠正我),所以它不是 DOM 上的图像标签,因此我不知道如何给它添加 css 样式
即使将其加载为图像,我也找不到使用 gmap3 定义回调函数的方法(并使用 jQuery 设置图像样式 select 或) 当自定义图标在 DOM 上完全加载时。 (我试过liveQuery
,这是个糟糕的主意,我试过google.maps.event.addListenerOnce(map, 'idle', function()
,但效果不佳。
以下是我的一些方法:
我将 animation
属性 添加到标记中,并将随机字符串传递给它(这会产生错误),这使得图标作为图像标签加载在 DOM.
然后我使用setTimeout
(因为我不知道在加载标记后在gmap3上定义回调函数的位置)到select图像css,并向该透明图标图像添加 background-image
css 属性,这样我就可以在标记
上创建自定义用户个人资料图像
请帮忙
要在标记上应用css,您可以尝试使用以下方法来包含var marker = new MarkerWithLabel
。 Link
所以我使用 gmap3 根据用户图像个人资料照片动态加载我的地图标记图标。理想情况下,我希望在标记图标图像上有一些自定义样式,并且每个标记图标图像因用户而异。
以下是我遇到的两个难点:
Google 将加载标记图标映射为 canvas(如果我错了请纠正我),所以它不是 DOM 上的图像标签,因此我不知道如何给它添加 css 样式
即使将其加载为图像,我也找不到使用 gmap3 定义回调函数的方法(并使用 jQuery 设置图像样式 select 或) 当自定义图标在 DOM 上完全加载时。 (我试过
liveQuery
,这是个糟糕的主意,我试过google.maps.event.addListenerOnce(map, 'idle', function()
,但效果不佳。
以下是我的一些方法:
我将
animation
属性 添加到标记中,并将随机字符串传递给它(这会产生错误),这使得图标作为图像标签加载在 DOM.然后我使用
setTimeout
(因为我不知道在加载标记后在gmap3上定义回调函数的位置)到select图像css,并向该透明图标图像添加background-image
css 属性,这样我就可以在标记 上创建自定义用户个人资料图像
请帮忙
要在标记上应用css,您可以尝试使用以下方法来包含var marker = new MarkerWithLabel
。 Link