如何对照片进行四舍五入和调整大小并将其设置为 Google Map API V3 的自定义标记答案

【问题标题】：How round and resize photo and set it into custom marker of Google Map API V3如何对照片进行四舍五入和调整大小并将其设置为 Google Map API V3 的自定义标记
【发布时间】：2015-07-20 20:47:52
【问题描述】：

我想通过组合两个图像marker_bg 和marker_pic 来为谷歌地图创建自定义地图标记我该怎么做。 Marker_bg 将用空白空间标记，其中将由marker_pic 填充。

圆形图片并将其设置为标记？

我正在使用以下技术；

HTML5/JAVASCRIPT/CSS3
聚合物#0.5
谷歌地图 API V3
PHP

【问题讨论】：

stackoverflow.com/questions/25707155/…
感谢Dr.Molle，但设置优化的影响：假？这会降低图像质量或其性能吗？
这样的？？ upsieutoc.com/image/ps9v
当你有很多标记时，它可能会在平移、缩放等时降低地图性能
仍然没有解决方案@Dr.Molle 您的解决方案很好，但是如何舍入和调整图像大小？

标签： javascript html css google-maps-api-3 polymer

【解决方案1】：

你可以这样做。

var marker = new google.maps.Marker({
    map: MAP_INSTANCE,
    position: LOCAIOTN,
    visible: true,
    icon: ICON_PATH
});

使用 SVG 图标并将内部图像路径更改为用户图像路径。

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <image width="80" height="80"
     xlink:href="[USER_ICON_PATH]" />
</svg>

PHP 为不同的用户生成不同的 SVG。

<?php
$url = 'http://lorempixel.com/200/200/';
echo '<svg width="216" height="216">
    <defs>
        <rect id="rect" x="8" y="8"width="200" height="200" rx="50%"/>
        <clipPath id="clip">
          <use xlink:href="#rect"/>
        </clipPath>
    </defs>
    <use xlink:href="#rect" stroke-width="8" stroke="black"/>
    <image xlink:href="' . $url . '"  width="100%" height="100%" clip-path="url(#clip)"/>
</svg>';
?>

http://jsfiddle.net/bhkxxh90/43/

更新：添加了 php 示例

更新：添加到 anwser 的 jsfiddle 链接

【讨论】：

@JohnDev 你可以这样jsfiddle.net/jigardafda/bhkxxh90/1
您可以在 SVG 中添加多个图像，请参阅此示例jsfiddle.net/bhkxxh90/8
我在 svg 中创建了它，看到这个jsfiddle.net/bhkxxh90/13 它在 jsfiddle 中完美显示，但是当我在 html5 中使用它时，它不能正确显示图像和标记它们之间有空格。
你能分享一下截图吗？
这正是这个解决方案根本不起作用的原因。我不明白赞成票。最终成为地图标记。这将适用于简单的 svg，但如果其中包含更复杂的内容（如 xlink:href），它将无法正常工作。

【解决方案2】：

如果你有这个。我觉得你可以尝试添加 2 层标记，第1层是第1图，是无背景的png图，第2层是有头像的第2图，第2层是1个位置，如果不匹配或不美观可以更改位置:)

喜欢这个https://www.upsieutoc.com/image/ps9v

代码

function setMarker(avataUrl, location){
(function(avataUrl,location){
    var layer1 = new google.maps.Marker({
                    map: map,
                    location: location,
                    icon : 'url image layer 1'
                });
    var layer2 = new google.maps.Marker({
                    map: map,
                    location: location,
                    icon : avataUrl
                }); 
})(avataUrl,location);
}

【讨论】：

这不是一个好建议。当您使用标记聚类器时，这将使您的所有标记计数加倍。此外，您必须双击事件、信息窗口等。

【解决方案3】：

至少我做到了。感谢@jad-panda 的帮助，我可以从中创建它，你不明白我想要什么，但我使用你的代码创建了它，这里是完整的代码：jsfiddle

<svg width="500" height="500">
    <defs>
        <rect id="rect" x="10%" width="80%" height="80%" rx="50%"/>
        <clipPath id="clip">
          <use xlink:href="#rect"/>
        </clipPath>
    </defs>
    <use xlink:href="#rect"/>
    <image xlink:href="http://lorempixel.com/200/200/"  width="80%" height="80%" x="10%" clip-path="url(#clip)"/>
    <image xlink:href="http://i61.tinypic.com/5zk09e.png"  width="100%" height="100%"/>

</svg>

图像位置是根据帧设置的，如果帧发生变化，那么可能图像的x和y也需要改变。

【讨论】：

您已经创建了一个 svg 源和剪辑图像。您无法完成 OP 的要求：在维护图像链接的同时在图像中获取 svg。