leafletjs自定義標記位置不正確

當我爲小冊子js添加自定義標記圖標時，標記圖標位置不正確。leafletjs自定義標記位置不正確

這是當我使用自定義標記http://jsfiddle.net/amrana83/7k5Jr/

這裏提琴是當我不使用自定義標記http://jsfiddle.net/amrana83/8skPU/1/

當我使用自定義標記

<style> 
    html, body, #map { 
    height: 500px; 
    width: 800px; 
    margin: 0px; 
    padding: 0px 
    } 
    .leaflet-map-pane { 
    z-index: 2 !important; 
    } 

    .leaflet-google-layer { 
    z-index: 1 !important; 
    } 
</style> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map = new L.Map('map', {center: new L.LatLng(51.5, -0.09), zoom: 4}); 
     var googleLayer = new L.Google('ROADMAP'); 
     map.addLayer(googleLayer); 
     var greenIcon = new L.Icon({iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'}); 
     L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);//using custom marker 
     L.marker([60.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map); 
    </script> 
    </body>

下面是一個小提琴碼

這是我不使用自定義標記時的代碼

<style> 
    html, body, #map { 
    height: 500px; 
    width: 800px; 
    margin: 0px; 
    padding: 0px 
    } 
    .leaflet-map-pane { 
    z-index: 2 !important; 
    } 

    .leaflet-google-layer { 
    z-index: 1 !important; 
    } 
</style> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map = new L.Map('map', {center: new L.LatLng(51.5, -0.09), zoom: 4}); 
     var googleLayer = new L.Google('ROADMAP'); 
     map.addLayer(googleLayer); 
     L.marker([51.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map);//not using custom marker 
     L.marker([60.5, -0.09], {}).bindPopup("I am a green leaf.").addTo(map); 
    </script> 
    </body>

來源

2014-03-28 ARIF MAHMUD RANA

您必須指定圖標的大小，像這樣：

var greenIcon = new L.Icon({ 
    iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png', 
    iconSize: [41, 51], // size of the icon 
    iconAnchor: [20, 51], // point of the icon which will correspond to marker's location 
    popupAnchor: [0, -51] // point from which the popup should open relative to the iconAnchor         
});

來源

2014-03-28 13:01:44

感謝您的迴應，它非常接近解決方案，所以我接受了這一點。 –

當我看到http://leafletjs.com/reference.html#icon我看到使用自定義標記圖標我必須要改變的圖標http://leafletjs.com/reference.html#icon-iconanchor的位置使得正確的，我們可以改變位置的圖標位置它正確。

這裏是一個小提琴後，我解決了這個問題http://jsfiddle.net/amrana83/xv8m9/1/

var LeafIcon = L.Icon.extend({ 
    options: { 
     iconAnchor: [19, 46],//changed marker icon position 
     popupAnchor: [0, -36]//changed popup position 
    } 
}); 
    var greenIcon = new LeafIcon({iconUrl: 'http://technobd.rvillage.com/application/modules/Rvillage/externals/images/all_members.png'});

來源

2014-03-31 06:36:25

你可以試試這個方法，它是如此容易:)

你第一次創建標記的CSS
.cd-單點{
位置：絕對;
list-style-type：none;
left：left_pos px;
top：top_pos px;
}
然後調用Javascript來調整這樣

div.style.left位置=（point.x- （left_pos/2））+ '像素';
div.style.top =（point.y- （top_pos/2））+'px';

...我覺得取決於你拿您可以更改的增量位置值的情況。這是我的結果希望得到這個幫助！

來源

2017-02-25 15:26:38

leafletjs自定義標記位置不正確

回答

相關問題