在Google地图中使用相对文件路径显示自定义标记 [英] Display Custom Marker in Google Maps Using Relative File Path

问题描述

我正在使用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）; //其中map是已经定义的google.maps.Map 
 
 code $ pre $ 
 $ b 
我目前在本地进行测试，并且我的文件结构类似于： 
 
 
 
 
 / Maps应用程序
 
 
 
 map.htm 
 
 
 /图片
 
 
 
 markerImage.png 
 
 
 
 
 
 
 
 
 
 
 
在html文件的其他地方，调用javascript函数，如： 
 
 
  addCustomMarker（'Images / markerImage.png'，'Custom Marker'，20，50）; 
  
然而，这是行不通的。没有标记显示。如果我注释掉icon：markerIcon行，则会显示默认标记，这表明它找不到图像文件。
 
 
 
是否有从我想要做的相对路径引用标记图像的方法？我已经尝试过'./Images/markerImage.png'和'/Images/markerImage.png'，但都不行。
 > 
是的，我也认为相对路径有效。我在本地尝试，它工作正常。我相信 icon：只需将值放入 img  src  
 
 
 
 
 $ b $ <$ p $ <$ p $ <$ p $ <$ p $ <$ p $ <$ p $ < c $ c> var marker = new google.maps.Marker（{map：map，
 position：new google.maps.LatLng（0,0），
 icon：icons / ride_red.png }）; 
  

图标是同一文件夹中的文件夹JavaScript / HTML文件的位置。

您确定您的大小写正确吗？如果您尝试硬编码图标选项，即：

  icon：'Images / markerImage.png'，
  

现在，这是一个愚蠢的问题：在浏览器中打开 markerImage.png ？

在本地网页旁边，这是一个包含相对图标路径的页面。您检查Metro SP Station复选框以显示图标。如果您查看源代码，

  estacao = new google.maps.Marker（{
 map：map，
位置：toLatLng（estacao_data.posn [0]，estacao_data.posn [1]），
图标：'metrosp /'+ estacao_data.icon [0] +'.png'，
 title ：estacao_data.name，
 visible：false 
}）; 
  

然后，您可以导航到 metrosp 文件夹并看到图像都在那里：

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

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:

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

Elsewhere in the html file, I then call the javascript function like:

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.

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.

解决方案

Yes, I also think relative paths work. I tried it locally and it works fine. I believe icon: just places the value into a src of an img tag, or something of the sort.

Here's my example:

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

icons is a folder in the same folder where the JavaScript/HTML file is.

Are you sure you have the capitalization correct? What if you tried "hardcoding" the icon option, that is:

icon: 'Images/markerImage.png',

Now here's a silly question: have you also tried opening that markerImage.png in your browser?

Beside local pages, here's a page that has relative icon paths. You check the "Metro SP Stations" checkbox to display the icons. If you look at the source,

     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 metrosp folder and see the images are all there:

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

这篇关于在Google地图中使用相对文件路径显示自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！