0
私の問題を説明するデモです:半径500000の地図上に円を描いていますが、ある場所では円が大きく見えます。地図のズームを確認しようとしましたが、常に同じです。地図上で円の円のサイズが変わるのはなぜですか?
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>