标记使用 base64 编码的字符串答案

【问题标题】：Marker Using base64 encoded string标记使用 base64 编码的字符串
【发布时间】：2012-10-15 05:38:06
【问题描述】：

我正在尝试通过使用 base64 编码字符串在 Google 地图上使用自定义标记。不知何故，它不起作用。

【问题讨论】：

标签： google-maps base64 google-maps-markers

【解决方案1】：

尝试如下操作：

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: 'hello',
    id: 'hehehe',
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA..."
});

编辑：只是补充：如果你使用服务器端语言来生成 js，你总是可以插入一些 PHP/Python/任何代码来加载图像并将其转换为它的 base64 表示。

类似（PHP 后端）：

$path = 'path/to/my/image.ext';

$info = getimagesize($info);
$ext = ($info[2]);

$data = file_get_contents($path);
$encoded = 'data:image/' . $ext . ';base64,' .base64_encode($data);

然后（前端）：

var marker = new google.maps.Marker({
    //...
    icon: '<?=$encoded;?>'
});

【讨论】：

感谢您分享此解决方案。它帮助我解决了 phonegap 应用程序构建后的相对路径问题。我从脚本中引用图像，但它在浏览器和应用程序中的工作方式不同。基于 Base64 的标记图像被证明是最可行的解决方案。