Newer
Older
2021-kodama / leaflet.js
//GitBucket GitBucket
//Toggle navigation
//Find a repository
//Pull requests
//Issues
//Snippets
//@c120087-kodama
 //Files
// Branches1
// Releases
 //Issues
 //Pull requests
// Labels
// Priorities
//Milestones
// Wiki
//  Fumiya238 / AR-project
// AR-project / leaflet / leaflet.js
//@Satou Fumiya Satou Fumiya on 2 Nov 4 KB clean:ファイルを整理、hrefを整理
//html = '<a href={url}> グーグルです </a>';
let map = L.map('map').fitWorld();
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);
map.setView([38.70010302736321, 139.88572398517292],16);
// map.locate({setView:true, maxZoom: 16}); よくわかんないけど中心位置がtrueで自分の今いる位置が表示される
 
let threshold = 50; //50メートル以内に設定
let id,marker,circle;
// マーカーと緯度経度の設定
// 松ヶ丘開墾記念館
//url = 'https://www.google.com';
// 松ヶ丘開本殿
var image = "<h1>松ヶ丘開本殿</h1><h3>武士たちの手によって開拓され築き上げられた松ヶ岡地区。松ヶ岡開墾場はその歴史と文化が残る国指定史跡である。明治維新後の1872年(明治5年)旧庄内藩士3千人が、刀や槍から鍬や鋤に持ち替え開墾し、産業振興に貢献したとされる歴史の地である。</h3><br><a href='https://www.chido.jp/matsugaoka/contents/1_kinenkan.html'> 松ヶ丘開本殿</a><img src='ねずみ.png'width'500' height='400'>";
var popup12 = L.popup({ maxWidth: 450 }).setContent(image);
let a = L.marker([38.7000547037002, 139.884302222165]).bindPopup(popup12).addTo(map);
a = L.latLng(38.7000547037002, 139.884302222165);

// 一番蚕室
var image1 = "<h1>一番蚕室</h1><h3>開館時間:9時〜16時<br>休館日:水曜日(祝日の場合は翌平日)、年末年始、臨時で開館・閉館あり<br>電話:0235-62-3985<br></h3><img src='ねずみ.png'width'500' height='400'>";
var popup1 = L.popup({ maxWidth: 450 }).setContent(image1);
let b = L.marker([38.700232, 139.885332]).bindPopup(popup1).addTo(map);
b = L.latLng(38.700232, 139.885332);

// 二番蚕室
var image2 = "<h1>二番蚕室</h1><h3>【1階休憩所、2階ギャラリー】<br/>開館時間:9時〜16時<br />休館日:水曜日(祝日の場合は翌平日)、年末年始、臨時開館・閉館あり<br />【一翠苑(1階)】<br /> 営業時間:11時〜14時<br />休業日:水曜日(祝日の場合は翌平日)、年末年始、臨時休業等あり<br /> 電話:0235-62-2928<br />【kibiso・侍絹・shop(1階)】<br />   営業時間:9時〜16時(冬季10時〜)<br/>休業日:水曜日(祝日の場合は翌平日)、年末年始、臨時休業等あり<br/>電話:0235-29-1607<br></h3><img src='ねずみ.png'width'500' height='400'>";
var popup2 = L.popup({ maxWidth: 450 }).setContent(image2);
let c = L.marker([38.699927, 139.885621]).bindPopup(popup2).addTo(map);
c = L.latLng(38.699927, 139.885621);

// 三番蚕室
var image3 = "<h1>三番蚕室</h1><h3>開館期間:6月と9月の蚕飼育時9時〜16時<br/>休館日:飼育期間中は無休<br/>電話:0235-64-1331</p><br></h3><img src='ねずみ.png'width'500' height='400'>";
var popup3 = L.popup({ maxWidth: 450 }).setContent(image3);
let x = L.marker([38.700314, 139.886072]).bindPopup(popup3).addTo(map);
x = L.latLng(38.700314, 139.886072);

// 新徴屋敷
var image4 = "<h1>新徴屋敷</h1><h3>1986(昭和61)年移築復元された開墾士の住宅です。庄内藩が江戸市中警備の役に就いた時、その任にあたらせた「新徴組」が庄内での住居として藩から与えられた住宅の事です。現在の新徴屋敷の建物は匹田家住宅として利用されたものを昭和61年(1986)に現在地に移築復元したものです。また、新徴屋敷は昭和63年(1988)に鶴岡市指定有形文化財に指定されています。</h3><br><a href='https://www.chido.jp/matsugaoka/contents/5_shincho.html'>新徴屋敷</a><img src='ねずみ.png'width'500' height='400'>";
var popup4 = L.popup({ maxWidth: 450 }).setContent(image4);
let y = L.marker([38.700088, 139.887369]).bindPopup(popup4).addTo(map);
y = L.latLng(38.700088, 139.887369);

// 貯桑土蔵
var image5 = "<h1>貯桑土蔵</h1><h3>営業時間:9時〜16時<br />休業日:水曜日(祝日の場合は翌平日)、年末年始、臨時休業等あり<br/>電話:0235-62-4824</p><br></h3><img src='ねずみ.png'width'500' height='400'>";
var popup5 = L.popup({ maxWidth: 450 }).setContent(image5);
let z = L.marker([38.70007, 139.886147]).bindPopup(popup5).addTo(map);
z = L.latLng(38.70007, 139.886147);


 
function onLocationFound(e) {
    let radius = e.accuracy/2;
    if (marker) map.removeLayer(marker); //マーカー削除
    marker = L.marker(e.latlng).addTo(map); //マーカー追加
    marker.bindPopup('現在地').openPopup();
    if (circle) map.removeLayer(circle);
    circle = L.circle(e.latlng, radius).addTo(map);
    map.setView(e.latlng);
    // 現在地と目的地の距離を計測
    let d = a.distanceTo(e.latlng);
    let g = b.distanceTo(e.latlng);
    let f = c.distanceTo(e.latlng);
    // 50メートル以内に近づいた時の処理
    if (d < threshold) {
        alert("おはよう");
    } else if(g < 10){
        window.location.href=('https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/AR/AR-location_based.html');
    } else if (f < threshold){
        alert("こんばんわ");
    }
}
// 位置情報取得できなかったときの処理
function onLocationError(e) {
    alert(e.message);
}
// 位置情報を持ってくる関数
function watchFound(e) {
    onLocationFound({
    latlng: L.latLng([
    e.coords.latitude, e.coords.longitude]),
    accuracy: e.coords.accuracy});
}
// id = navigator.geolocation.watchPosition(watchFound,onLocationError);
 
let $start = document.getElementById('start');
// スタートボタンクリック時の位置情報を定期的に取得
$start.addEventListener("click", function(e) {
    this.setAttribute("disabled", true);
    id = navigator.geolocation.watchPosition(watchFound,onLocationError);
});
// 位置情報取得中止
let i=1;
let $stop = document.getElementById('stop')
$stop.addEventListener("click", function(e) {
    $start.removeAttribute("disabled");
    $zuru.removeAttribute("disabled");
    navigator.geolocation.clearWatch(id);
    i=1;
});
 
// マップクリックしたら経度、緯度の表示
const $zuru = document.getElementById('zuru');
let popup = L.popup();
function onMapClick(e) {
    if (i===0){
    if (marker) map.removeLayer(marker); 
    marker = L.marker(e.latlng).addTo(map); 
    marker.bindPopup('現在地').openPopup();
    if (circle) map.removeLayer(circle);
    circle = L.circle(e.latlng).addTo(map);
    map.setView(e.latlng);
    let d = a.distanceTo(e.latlng);
    let g = b.distanceTo(e.latlng);
    let f = c.distanceTo(e.latlng);
    // 50メートル以内に近づいた時の処理
    if (d < threshold) {
        alert("おはよう");
    } else if(g < 20){
        alert('みつかった〜!')
        window.location.href=('https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/AR/AR-location_based.html');
    } else if (f < threshold){
        alert("こんばんわ");
    }
    }
}
$zuru.addEventListener('click',function (){
    i=0;
    this.setAttribute("disabled", true);
    map.on('click', onMapClick);
});
 
 
 
// setViewまたはcenterで最初に表示される中心位置を設定できる
// zoomで最初に表示される近さを設定できる
// .bindPopupメソッドでHTMLコンテンツを含むポップアップを表示する
// .popup()で表示されるコンテンツを設定できる
// .latlngでその場所の経度、を緯度調べられる
// distanceTo(<LatLng> otherLatLng)で距離が図れる
// LatLng.distanceTo(otherLatLng)で書いたらうまく行った
// let map = L.map('map').setView([38.89232, 139.82221], 15);
// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    // }).addTo(map);