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.htm
- /图像
  - markerImage.png

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

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

然而，这不起作用。没有标记显示。如果我注释掉“icon：markerIcon”行，则显示默认标记，告诉我它无法找到图像文件。

有没有办法像我想要的那样从相对路径引用标记图像？我也尝试了'./Images/markerImage.png'和'/Images/markerImage.png'，但都没有工作。

Answer 1

是的，我也认为相对路径有效。我在本地尝试过，它运行正常。我相信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？

在本地页面旁边，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/

Answer 2

不，您无法使用图片的相对地址。该引脚显示在来自不同服务器的页面上，因此您必须使用完整的地址。

使用相对文件路径在Google地图中显示自定义标记

2 个答案: