Newer
Older
2022-S.Keigo / map / app2 / mapobj.js
@”Sato ”Sato on 9 Dec 2022 2 KB 作成中
/* Add some objects on a Map */
document.addEventListener("DOMContentLoaded", () => {

var pl = [			// Polyline: 連続線分
    [38.895127,139.819371],
    [38.894903,139.819361],
    [38.894907,139.819951],
    [38.896461,139.819897],
    [38.897229,139.819586],
    [38.898849,139.818916],
    [38.903195,139.816936],
    [38.903950,139.816582],
    [38.904418,139.814345],
    [38.904576,139.814356],
    [38.904551,139.814620],
    [38.904706,139.814587]
];
var plProp = {	
    stroke:true,		// polylineに与えるオプション
    color: "#D92B04",		// 線分の色
    opacity: 0.7,		// 線分の透明度
    weight: 9			// 線分の太さ
};
var plobj = L.polyline(pl, plProp).addTo(mymap);

var pg = [			// Polygon: ポリゴン
    [38.904586,139.814572],
    [38.904589,139.814415],
    [38.904768,139.814447],
    [38.904760,139.814849],
    [38.904647,139.814844],
    [38.904647,139.814571]	// 終点と始点は連結される
];

var pgOpt = {	
    stroke:true,		// polygonに与えるオプション
    color: "black",		// 線分の色
    fillColor: "yellow",		// 塗りつぶし部分の色
    fillOpacity: 0.5
    // clickable:false	// 塗りつぶし部分の透明度
};

var pgobj = L.polygon(pg, pgOpt).addTo(mymap);
var marker1 = pl[0], marker2 = pg[0], marker3 = pl[7];// polylineとpolygon各々の始点
var m1opt = {title: "その1"}, m2opt = {title: "その2"},m3opt={title: "その3"};
var m1 = L.marker(marker1, m1opt).addTo(mymap);
var m2 = L.marker(marker2, m2opt).addTo(mymap);
var m3 = L.marker(marker3, m3opt).addTo(mymap);
var circle1 = L.circle(pl[11],{radius: 200,
    color:'', fillColor: '#399ade'}).addTo(mymap);
// /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
// 次のようにあらかじめ1つのポップアップを開いておくことも可能
var osmTile =	// OSMのタイル
	L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
	});

var gsiTile =	// 国土地理院タイル
	L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	attribution:
	'<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
	}); 


m1.bindPopup("公益大学カフェテリア側駐車場スタート!!!").openPopup();
m2.bindPopup("〒998-0054 山形県酒田市宮野浦2丁目3−3 酒田市宮野浦学区コミュニティ防災センター");
m3.bindPopup("斜め左方向です");
plobj.bindPopup("多分坂道");
circle1.bindPopup("目的地周辺です");