Newer
Older
2023-c122213 / map / last / last-map.js
function iconClick() {
    var clickCount = 0;
var mymap = L.map("mymap").setView([38.891, 139.824], 14);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

var moguraxIcon = L.icon({
	iconUrl:"mogurax.png",
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
	
    var moguraIcon = L.icon({
    	iconUrl:"mogura.png",
    	iconSize:[75,75],
    	iconAnchor:[37,75],
    	popupAnchor:[0,-70]
        });

//marker.on('click', function(){
//   if (marker.getIcon() === moguraIcon) {
//      marker.setIcon(moguraxIcon);}
//         });
    
//var marker = L.marker([38.919584, 139.827638],{icon:moguraIcon}).addTo(mymap).bindPopup("日和山公園");
//var p1 = L.marker([38.91463864,139.83655262],{icon:moguraIcon}).addTo(mymap).bindPopup("市役所");
var p2 = L.marker([38.902518,139.820064],{icon:moguraIcon}).addTo(mymap).bindPopup("ト一屋高見台店");
var p3 = L.marker([38.893482,139.819486],{icon:moguraIcon}).addTo(mymap).bindPopup("公益大");
var p4 = L.marker([38.890760,139.854155],{icon:moguraIcon}).addTo(mymap).bindPopup("日本海病院");
var p5 = L.marker([38.906964,139.831553],{icon:moguraIcon}).addTo(mymap).bindPopup("市営体育館");
var p = L.marker([38.922029,139.846108],{icon:moguraIcon}).addTo(mymap).bindPopup("酒田駅");


 p,p2.on('click', function(){
    if (p.getIcon() === moguraIcon) {
      p.setIcon(moguraxIcon);
    }
  });
  
//  var point = 0;
//  function ClickEvent (e){
//       point ++;
//    }
//    var msg = null;
//msg.innerText = `残り ${point}秒`;

    // 3. Marker-Instanceに対して、.on('click', CallBackFunc) でClickイベントの関数を登録!
//    const siyakusyo = L.marker([38.91463864,139.83655262]).addTo(map).on('click', (e) => {
//        ClickEvent(e);
//    });
  
  

var marker = L.marker([38.919584, 139.827638]).addTo(mymap).bindPopup('地図上のどこかをクリックしてください').openPopup();
    function moveIcon(e) {
	marker.setLatLng(e.latlng).bindPopup(
	    ++clickCount + "回目のクリックです.\n" + e.latlng
	).openPopup();
    }
    mymap.on('click', moveIcon);
}
document.addEventListener("DOMContentLoaded", iconClick);




//var pl = [			// Polyline: 連続線分
//    [38.902518,139.820064],
//    [38.901976,139.820675],
//    [38.900623,139.821898],
//    [38.898736,139.818830],
//   [38.896669,139.819919],
 //   [38.894811,139.819989],
//    [38.894820,139.819323],
//    [38.894269,139.819334]
//];
//var plProp = {			// polylineのプロパティを定義
//    color: "green",		// 線分の色
 //   opacity: 0.4,		// 線分の透明度
//    weight: 9			// 線分の太さ
//};
//var plobj = L.polyline(pl, plProp).addTo(mymap);


//var marker1 = pl[0]; // polylineとpolygon各々の始点
//var m1opt = {title: "その1"};
//var m1 = L.marker(marker1, m1opt,{icon:moguraIcon}).bindPopup("ト一屋ですよ!").addTo(mymap);



//plobj.bindPopup("ト一屋へのルートですよ!");
//m1.bindPopup("ト一屋ですよ!");