マップ上で動くアイコン

icon-click

icon-click.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Moving ICON by Click</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../src/leaflet.css" />
<script src="../src/leaflet.js"></script>
<style type="text/css">
<!--
div#icon-click {width: 90vw; height: 80vh; margin: 0 auto;}
-->
</style>
</head>

<body>
<h1>Moving ICON by Click</h1>
<div id="icon-click"></div>


<script type="text/javascript"
 src="../src/icon-click.js" charset="utf-8"></script>

</body>
</html>

icon-click.js

// 例
function iconClick() {
    var center = [38.891, 139.824];
    var clickCount = 0;
    var mymap = L.map("icon-click").setView(center, 16);
    mymap.scrollWheelZoom.disable();
    L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	attribution:
	'<a href="http://maps.gsi.go.jp/development/ichiran.html">\
	国土地理院</a>'
    }).addTo(mymap);
    var marker = L.marker(center).addTo(mymap);
    marker.bindPopup('地図上のどこかをクリックしてください').openPopup();
    function moveIcon(e) {
	marker.setLatLng(e.latlng).bindPopup(
	    ++clickCount + "回目のクリックです.\n" + e.latlng
	).openPopup();
    }
    mymap.on('click', moveIcon);
}
document.addEventListener("DOMContentLoaded", iconClick);

→ 目次