Leaflet.jsにマーカーを追加する

これはシンプルですが謝罪しますが、私はこれに熟練しておらず、読んでいて、私が現在使っているポイントに達するために複数の例を適用しました。Leaflet.jsにマーカーを追加する

私が実行しているキャンペーンの地図を作成しています。私はこれを行うためにチラシを使いました。そして、たくさんの微妙な変更の後、私は最終的にそれが（それがたくさん更新されるので、私が欲しいものです）一つのイメージを使用してすべて働いていました。

次のステップは、関心のある位置にマーカーを追加することです。今私は特別なことは特に望んでいない、私はマーカーとポップアップ（ここに示すように：http://leafletjs.com/examples/quick-start/example-popups.html）を使用しようとしていた - しかし、私は様々な例とチュートリアルを見てから試みたメソッドは動作していないようです。

私は以下のコードを貼り付けて、助けることができる人には大変感謝しています。再び、私はそれが本当に単純なものであれば、私は謝罪します。私の限られた知識のすべては、読んだり調整したりすることからです。

これのほとんどは、このチュートリアルで使用して構築されています：http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

<link rel="icon" type="image/png" href="assets/icon.ico"> 

<title>Whispers of Valentia</title>   



<link rel="stylesheet" href="map.css" type="text/css" />  

<link href='http://fonts.googleapis.com/css?family=Cantora+One|Acme|Meddon|Jim+Nightshade' rel='stylesheet' type='text/css'> 

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> 

</head> 

<body> 

    <div id="navigationBar"> 


     <div id="navigationLogo"> 

        <abbr title="This is a test map.">WHISPERS OF VALENTIA</abbr> 

     </div> 


    </div> 

    <div class="shadeBar"></div> 


    <div id="image-map" style="background: #1e2831;"> 


    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

<script> 

// Using leaflet.js to pan and zoom a big image. 

// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html 

// create the slippy map 

var map = L.map('image-map', { 

    minZoom: 2, 

    maxZoom: 6, 

    center: [5000, 2400], 

    zoom: 2, 

    crs: L.CRS.Simple 

}); 

// dimensions of the image 

var w = 10000, 

    h = 4800, 

    url = 'valentiatest.jpg'; 

// calculate the edges of the image, in coordinate space 

var southWest = map.unproject([0, h], map.getMaxZoom()-1); 

var northEast = map.unproject([w, 0], map.getMaxZoom()-1); 

var bounds = new L.LatLngBounds(southWest, northEast); 


// add the image overlay, 

// so that it covers the entire map 

L.imageOverlay(url, bounds).addTo(map); 

// tell leaflet that the map is exactly as big as the image 

map.setMaxBounds(bounds); 

var marker = L.marker([1000, 1000]).addTo(map); 


</script> 

    </div> 

</body>

出典

2017-06-12 Lloydski

あなたのコードが正しいようです。あなたは、マーカーを追加するには、次のコードを使用：緯度：

var marker = L.marker([1000, 1000]).addTo(map);

がこの位置にマーカーを追加することに注意してください1000; 経度：1000;

これは正しくありません。地図に記載されていません。センターに基づいて正しい位置を追加して追加します。以上の情報のためのリーフレットのサンプルコードとドキュメントに

見：私は地図を作るために使用される例で

http://leafletjs.com/examples/quick-start/

出典

2017-06-12 17:54:47 aorfevre

は、それが座標としてピクセルを使用することを述べました。私はこれらのピクセル座標を使用して中心を設定しましたが、マーカーを中央に置く場所に基づいてlonglatで実行しますか？ – Lloydski

doc：http://leafletjs.com/reference-1.0.3.html#marker MArkersはGPS位置座標です。ピクセルではありません – aorfevre

あなたのご協力に感謝します。これに戻ります。 – Lloydski

Leaflet.jsにマーカーを追加する

答えて

関連する問題