4

作成しようとしているマップ ナビゲーション アプリケーションを続行すると、次のエラーが発生しました。

OSM タイルを解析し、すべてのポイント オブ インタレストのリストを取得します。これは成功です。次に、いくつかのカスタム アイコンを使用して、Leaflet にマーカーを配置します。上記の部分のコードは次のとおりです

最初に含まれるもの：

<link rel="stylesheet"href="./includes/leaflet.css" />
<link rel="stylesheet" href="./includes/style.css" type="text/css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="./includes/jquery.js"></script>
<script src="./includes/geo.js" type="text/javascript"></script>
<script src="./includes/gears_init.js" type="text/javascript"></script>
<script type="text/javascript">

見つかったナビゲーション ポイントには、次のようなカスタム アイコンがあります。

if($.inArray(EleID, MarkerArray)==-1)
                {

                    if(LocType!="")
                    {
                        var markerLocation = new L.LatLng(EleLat,EleLon);
                        var Icon = new CustomIcon("./images/"+LocType+".png");
                        var marker = new L.Marker(markerLocation,{icon : Icon});

                        if(EleText!="")
                        {
                            marker.bindPopup(EleText);

                        }

                        Layergroup.addLayer(marker);
                        MarkerArray.push(EleID);
                    }

                }

これらのアイコンは ./image/ ディレクトリにあり、そのタイプはアイコンの名前です (p.ex. hotel.png のホテル)

最後に、HTML ドキュメントの Body セクションにマップを作成します。

var map = new L.Map('map');


        var cloudmadeUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
            cloudmadeAttrib = 'Map data CC-BY-SA &amp; ODbL 2012 OpenStreetMap contributors, Data via <a href="http://www.overpass-api.de/">Overpass API</a>',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});


        var CustomIcon = L.Icon.extend({
            iconUrl: './images/hotel.png',
            shadowUrl: './images/shadow.png',
            iconSize: new L.Point(32, 32),
            opacity: 0.5,
            //shadowSize: new L.Point(68, 95),
            iconAnchor: new L.Point(16, 16),
            popupAnchor: new L.Point(0, -18)
        });

これは私が持っていた古いリーフレットスクリプトではうまく機能しましたが、私が作業している更新されたバージョンでは機能せず、このエラーが発生しました:

キャッチされないエラー: iconUrl がアイコン オプションに設定されていません (ドキュメントを参照)。リーフレット.js:6

IconURL がリーフレット内のどこに設定されているのか正確にはわかりませんが、私が間違っていることを誰か知っていますか?

4

1 に答える 1

7

を拡張して CustomIcon を定義するときL.Icon.extend()は、オプション オブジェクトでオプションをラップする必要があります。そのようです：

var CustomIcon = L.Icon.extend({
   options: {
        iconUrl: './images/hotel.png',
        shadowUrl: './images/shadow.png',
        iconSize: new L.Point(32, 32),
        opacity: 0.5,
        //shadowSize: new L.Point(68, 95),
        iconAnchor: new L.Point(16, 16),
        popupAnchor: new L.Point(0, -18)
      }
    });
于 2013-06-14T13:58:47.957 に答える