0

Leaflet を含む API を使用しようとしています。アイデアは、マップ上に興味のあるポイントを配置することです。

このフィドルでは、私が達成しようとしていることを見ることができます: fiddle . 私が直面している問題は、カスタム アイコンを追加しようとすると、ズームとアンカーが失敗することです。何らかの理由で、デフォルトのアイコンがマップ上に正しく配置されていますが、それらが失敗しない理由もわかりません。

私のコードはすべて、次の部分を除いてフィドルとほぼ同じです。

以下に、カスタム アイコンの作成方法を示します。

var waypoint = L.icon({
    iconUrl: 'waypoint.png',        
    //iconSize: [30, 30], // size of the icon       
    iconAnchor: [0, 0] // point of the icon which will correspond to marker's location      
});

以下に、マーカーにアイコンを追加する方法を示します。

L.marker(unproject(poi.coord), {
                    title: poi.name,
                    icon: waypoint
                }).addTo(map);

更新: 以下に違いを示します。

画像

私は何が欠けていますか？

4

1 に答える 1

0

（OPに代わって投稿。）

わかりました、私はそれを修正することができました。

これは私が間違っていたことです。外部リソース (.js と .css) を取得し、それらを自分のプロジェクトにローカルに配置しました。次のような URL を使用してプロジェクトに 2 つを追加すると、次のようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.css" type="text/css">

すべてが期待どおりに機能しました。

于 2015-06-01T08:01:54.417 に答える