在谷歌地图中添加本地图像作为自定义标记答案

【问题标题】：Add local image as custom marker in google maps在谷歌地图中添加本地图像作为自定义标记
【发布时间】：2020-05-03 10:13:00
【问题描述】：

我正在尝试使用谷歌地图创建自定义标记。

var iconBase = //some url;
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'marker.png'
});

这基本上有效。我在谷歌驱动器中托管我的图像。这很好，但有点慢，在单击地图并渲染标记后第一次加载图像大约需要 500-700 毫秒。所以我试图在本地添加图像，可悲的是，我似乎无法找到关于这个的资源。如何使用本地（在我的项目目录中）图像？

假设我将它放在与我调用谷歌地图服务的 php 文件相同目录级别的文件夹“图标”中，如果有帮助的话。谢谢！

更新！

我试过了：

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "pubIcons/male-2.png"
            });

其中 pubIcons 是与我渲染地图的 php 文件位于同一目录中的文件夹。我得到这个错误：

GET http://localhost/bims-2.0/index.php/location/view/pubIcons/male-2.png 404 (Not Found)

它的行为有点像 pubIcons/male-2.png 是我的控制器“视图”中的一个动作，我正在使用 Yii 顺便说一句。

【问题讨论】：

omg 传单好多了

标签： javascript google-maps google-maps-api-3

【解决方案1】：

试试这个代码:)

var image = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q";
var marker = new google.maps.Marker({
        position: location,
        map: globalMap,
        icon: image
});

更新

var image  = "http://yourdomain.com/image/image.php";

或

icon : "/pubIcons/male-2.png"

【讨论】：

本地，我的意思是在你的项目目录中
您可以在这里阅读更多内容：stackoverflow.com/questions/23949867/…

【解决方案2】：

我也遇到了这个问题，但以不同的方式解决了它。我将 Django 用于我的 Web 框架，而 Django 使用了一个名为 static 的目录。不知道这个目录是否可以在 Django 之外使用。我将图片加载到我的静态文件和网页的正文标签中，有代码

<div style="display:none">
    `<img src="{% static 'map/CrocMarker_45.png' %}" alt="Croc Marker" id="crocMark">`
</div>

在这种情况下，我将显示设置为无，因为我不想在 body 标记中呈现图片，只想加载它以便我可以在我的地图脚本中访问它。

在我的function initMap() 中，我创建了变量 var crocMark=document.getElementById("crocMark").src;.

稍后，当您创建标记时，您可以将图标设置为此变量。例如：

var XMarker=new google.maps.Marker({ position: location, map: map_name, icon: crocMark });

这可能不是最好的方法，但它对我很有效，我希望它对你也有效。

编辑：请注意，如果不清楚，这是我的项目结构。

Project Root "Django">Django Root "Django_Project">My apps e.g. "map">static>map

【讨论】：

【解决方案3】：

google.maps.Marker 的 icon 参数需要一个 URL。通过指定 "pubIcons/male-2.png"，您提供了一个相对 URL，相对于您所在的页面。

如果要从本地文件系统指定文件，则需要使用文件 URL，例如："file:///var/www/pubIcons/male-2.png" 或您的文件位于本地文件系统上的任何位置。当然，如果您从本地机器加载 javascript，您将只能访问本地文件。

完整示例：

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "file:///var/www/pubIcons/male-2.png"
            });

【讨论】：