Newer
Older
2022-S.Keigo / map / app2 / mapobj.js
@”Sato ”Sato on 2 Dec 2022 1 KB 好きな場所マップ
/* Add some objects on a Map */

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 = {			// polylineに与えるオプション
    color: "orange",		// 線分の色
    opacity: 0.4,		// 線分の透明度
    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 = {			// polygonに与えるオプション
    color: "blue",		// 線分の色
    fillColor: "pink",		// 塗りつぶし部分の色
    fillOpacity: 0.2		// 塗りつぶし部分の透明度
};
var pgobj = L.polygon(pg, pgOpt).addTo(mymap);

var marker1 = pl[0], marker2 = pg[0]; // polylineとpolygon各々の始点
var m1opt = {title: "その1"}, m2opt = {title: "その2"};
var m1 = L.marker(marker1, m1opt).addTo(mymap);
var m2 = L.marker(marker2, m2opt).addTo(mymap);

// /* オブジェクトレイヤ.bindPopup() でクリック時のポップアップを定義できる */
plobj.bindPopup("ルートですよ!");
pgobj.bindPopup("建物ですよ!");
m1.bindPopup("公益大学カフェテリア側駐車場スタート!!!");
// 次のようにあらかじめ1つのポップアップを開いておくことも可能
m2.bindPopup("宮野浦学区コミュニティ防災センター").openPopup();