3

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
}

現在、ローカルでテストしており、ファイル構造は次のようになっています。

  • /マップ アプリケーション
    • map.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"});

iconsJavaScript/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

いいえ、画像に相対アドレスを使用することはできません。PIN は別のサーバーのページに表示されるため、完全なアドレスを使用する必要があります。

于 2012-05-26T08:33:46.873 に答える