javascript - 使用相对文件路径在 Google map 中显示自定义标记

Question

我正在使用 Google 的 Javascript APi v.3.0 开发网络应用程序。我希望能够显示自定义标记，但是当我尝试添加它们时它们不会出现。我在 Javascript 中编写了一个辅助函数来显示自定义标记:

function addCustomMarker(iconFile,iconTitle,lat,lng){
   var loc = new google.maps.LatLng(lat,lng);
   var marker = new google.maps.Marker({
      position:loc,
      icon:iconFile,
      title: iconTitle,
      zIndex:2
   });
   marker.setMap(map);//Where map is a google.maps.Map already defined
}

我目前正在本地测试，我的文件结构类似于:

• / map 应用
  • map.htm
  • /图片
    • markerImage.png

在 html 文件的其他地方，然后我调用 javascript 函数，如下所示:

addCustomMarker('Images/markerImage.png', 'Custom Marker', 20, 50);

但是，这不起作用。不显示标记。如果我注释掉“icon: markerIcon”行，那么会显示默认标记，告诉我它找不到图像文件。

有没有办法像我尝试做的那样从相对路径中引用标记图像？我也试过 './Images/markerImage.png' 和 '/Images/markerImage.png' ，但都不管用。

Answer 1

是的，我也认为相对路径有效。我在本地尝试过，效果很好。我相信 icon: 只是将值放入 img 标记的 src 或类似的东西中。

这是我的例子:

var marker = new google.maps.Marker({map: map, 
  position: new google.maps.LatLng(0,0), 
  icon: "icons/ride_red.png"});

icons 是 JavaScript/HTML 文件所在文件夹中的一个文件夹。

您确定大小写正确吗？如果您尝试“硬编码” icon 选项，即:

icon: 'Images/markerImage.png',

现在这是一个愚蠢的问题:您是否也尝试在浏览器中打开该 markerImage.png？

除了本地页面，here's a page具有相对图标路径。您选中“Metro SP Stations”复选框以显示图标。如果你看源码，

     estacao = new google.maps.Marker({
        map: map,
        position: toLatLng(estacao_data.posn[0], estacao_data.posn[1]),
        icon: 'metrosp/' + estacao_data.icon[0] + '.png',
        title: estacao_data.name,
        visible: false
      });

然后您可以导航到 metrosp 文件夹并查看所有图像:

https://files.nyu.edu/hc742/public/googlemaps/metrosp/