leafletjs benutzerdefinierte Markerposition nicht richtig

Wenn ich ein benutzerdefiniertes Markierungssymbol für die Broschüre js hinzufüge, ist das Markierungssymbol nicht korrekt positioniert.leafletjs benutzerdefinierte Markerposition nicht richtig

Hier eine Geige ist, wenn ich benutzerdefinierten Marker http://jsfiddle.net/amrana83/7k5Jr/

Hier bin mit ist der Code, wenn ich benutzerdefinierten Marker

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

Hier eine Geige bin mit, wenn ich keinen benutzerdefinierten unter Verwendung Marker http://jsfiddle.net/amrana83/8skPU/1/

Hier ist Code, wenn ich keine benutzerdefinierte Markierung verwende

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

Quelle

2014-03-28 ARIF MAHMUD RANA

Sie haben die Größe von Symbol, um so etwas zu spezifizieren:

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         
});

Quelle

2014-03-28 13:01:44

Danke für Ihre Antwort, es ist sehr nah an der Lösung, so akzeptiere ich dies. –

Als ich http://leafletjs.com/reference.html#icon sehe ich sehe mit Ikone Markierung I Position ändern Symbol des Symbols http://leafletjs.com/reference.html#icon-iconanchor macht Position richtig haben, können wir auf Position ändern es richtig.

Hier eine Geige ist, nachdem ich das Problem 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'});

Quelle

2014-03-31 06:36:25

Sie löste diese Art und Weise versuchen können, es ist so einfach :)

Die erste erstellen Sie die CSS für Marker
.cd- Einpunkt {
Position: absolut;
Liste-Stil-Typ: keine;
links: left_pos px;
oben: top_pos px;
}
dann die Javascript rufen Sie die Position wie diese

div.style.left = (point.x- (left_pos/2)) + 'px' einzustellen;
div.style.top = (point.y- (top_pos/2)) + 'px';

... Ich denke, hängt von dem Fall ab, den Sie bekommen Sie können den Wert der Delta-Position ändern. Das ist mein Ergebnis Hope this help!

Quelle

2017-02-25 15:26:38

leafletjs benutzerdefinierte Markerposition nicht richtig

Antwort

Verwandte Themen