3

我正在使用 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
}

我目前正在本地测试，我的文件结构看起来像：

  • /地图应用
    • 地图.htm
    • /图片
      • 标记图像.png

在 html 文件的其他地方，我然后调用 javascript 函数，如：

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

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

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

4

2 回答 2

8

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

这是我的例子：

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在浏览器中打开它？

除了本地页面，这里还有一个具有相对图标路径的页面。您选中“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/

于 2012-05-27T00:24:34.310 回答
1

不，您不能对图像使用相对地址。该图钉显示在来自不同服务器的页面上，因此您必须使用完整的地址。

于 2012-05-26T08:33:46.873 回答