Hier ist eine Demo, die mein Problem illustriert: Ich zeichne einen Kreis auf einer Karte mit Radius 500000, aber an einem Ort sieht der Kreis größer aus. Ich habe versucht, den Zoom der Karte zu überprüfen und es ist immer dasselbe.Warum ändert sich die Kreisgröße auf der Karte?
place = {
name1:[-33.8650, 151.2094],
name2:[59.3293, 18.0686]
};
var id,circle,center;
function panMap() {
id=this.getAttribute('id');
center=place[id];
map.panTo(center);
circle = L.circle(center,500000, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
console.log("zoom = " +map.getZoom());
};
// center of the map
var center = [29,29];
// Create the map
var map = L.map('map').setView(center, 3);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var classname = document.getElementsByTagName("button");
for (var i=0;i<classname.length;i++) {
classname[i].addEventListener("click", panMap, false);
};
.container {
height: 30px;
width:100%;
}
#map {
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div class="container">
<button id="name1">place1</button>
<button id="name2">place2</button>
</div>
<div id="map"></div>