gpt4 book ai didi

javascript - leafletjs 自定义标记位置不正确

转载 作者:数据小太阳 更新时间:2023-10-29 04:54:22 26 4
gpt4 key购买 nike

当我为传单 js 添加自定义标记图标时,标记图标的位置不正确。

这是我使用自定义标记时的 fiddle http://jsfiddle.net/amrana83/7k5Jr/

这是我使用自定义标记时的代码

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

当我不使用自定义标记时,这是一个 fiddle 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);
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>

最佳答案

你必须指定图标的大小,像这样:

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

关于javascript - leafletjs 自定义标记位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22706270/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com