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

Question

我正在使用谷歌的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在浏览器中打开它？

除了本地页面,这是一个具有相对图标路径的页面.您选中"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/