javascript 使用相对文件路径在 Google 地图中显示自定义标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10764781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Custom Marker in Google Maps Using Relative File Path
提问by gwiz1124
I am using Google's Javascript APi v.3.0 to develop a web app. I want to be able to display custom markers, but they don't show up when I try to add them. I've written a helper function in Javascript to display a custom marker:
我正在使用 Google 的 Javascript API v.3.0 来开发 Web 应用程序。我希望能够显示自定义标记，但是当我尝试添加它们时它们不显示。我在 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
}
I'm currently testing locally and my file structure sort of looks like:
我目前正在本地测试，我的文件结构有点像：
- /Maps Application
- map.htm
- /Images
- markerImage.png
- /地图应用
- 地图.htm
- /图片
- 标记图像.png
Elsewhere in the html file, I then call the javascript function like:
在 html 文件的其他地方，我然后调用 javascript 函数，如：
addCustomMarker('Images/markerImage.png', 'Custom Marker', 20, 50);
However, this does not work. No marker is displayed. If I comment out the "icon: markerIcon," line, then the default marker is displayed, which tells me that it can't find the image file.
但是，这不起作用。不显示标记。如果我注释掉“icon:markerIcon,”行，则会显示默认标记，这告诉我它找不到图像文件。
Is there a way to reference marker images from a relative path like I am trying to do? I've tried './Images/markerImage.png' and '/Images/markerImage.png' as well, and neither work.
有没有办法像我试图做的那样从相对路径引用标记图像？我也试过 './Images/markerImage.png' 和 '/Images/markerImage.png'，但都不起作用。
回答by Tina CG Hoehr
Yes, I also think relative paths work. I tried it locally and it works fine. I believe icon:just places the value into a srcof an imgtag, or something of the sort.
是的，我也认为相对路径有效。我在本地试过了，效果很好。我相信，icon:只是会将值转换成src一个的img标签，或者类似的东西。
Here's my example:
这是我的例子：
var marker = new google.maps.Marker({map: map,
position: new google.maps.LatLng(0,0),
icon: "icons/ride_red.png"});
iconsis a folder in the same folder where the JavaScript/HTML file is.
icons是 JavaScript/HTML 文件所在文件夹中的一个文件夹。
Are you sure you have the capitalization correct? What if you tried "hardcoding" the iconoption, that is:
你确定你的大小写正确吗？如果您尝试“硬编码”该icon选项会怎样，即：
icon: 'Images/markerImage.png',
Now here's a silly question: have you also tried opening that markerImage.pngin your browser?
现在有一个愚蠢的问题：您是否也尝试过markerImage.png在浏览器中打开它？
Beside local pages, here's a pagethat has relative icon paths. You check the "Metro SP Stations" checkbox to display the icons. If you look at the source,
除了本地页面，这里还有一个具有相对图标路径的页面。您选中“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
});
Then you can navigate to the metrospfolder and see the images are all there:
然后您可以导航到该metrosp文件夹并查看所有图像：
回答by Guffa
No, you can't use a relative address for the image. The pin is displayed on a page from a different server, so you have to use the complete address.
不，您不能为图像使用相对地址。该 pin 显示在来自不同服务器的页面上，因此您必须使用完整地址。
