在Leaflet上,自定义标记不会挂钩到坐标,而是随着地图的比例移动。
我该如何解决这个问题?
<html>
<head>
<!-- Library Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<style>
#map {
position: absolute;
}
</style>
</head>
<body style="margin:0px; padding:0px;" >
<div id="map" style="width:100%; height:100%"></div>
<script type="text/javascript">
window.onload= function() {
var lat =43.6;
var lon = 6.99;
var map = L.map("map").setView([43.6,6.99],18) ;
var lyrOSM= L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?') ;
lyrOSM.addTo(map);
// create icon
var myIcon = L.icon( {
iconUrl: 'C:/Users/ericire/Pictures/map markers/pin_red.png',
iconSize: [32, 32],
shadowSize: [12, 10],
iconAnchor: [16, 32],
popupAnchor: [5, -5]
} );
var myIcon2 = L.icon( {
iconUrl: 'C:/Users/ericire/Pictures/map markers/pin_red.png',
iconSize: [32, 32],
shadowSize: [12, 10],
iconAnchor: [0, 0],
popupAnchor: [5, -5]
} );
//markers
var marker = L.marker( [location.lat, location.lon ], { icon: myIcon } ).addTo(map);
var marker = L.marker( [location.lat, location.lon ], { icon: myIcon2 } ).addTo(map);
}
</script>
</body>
</html>