iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
Modern Web

ML X 友廷等公車系列 第 4

Day 4 : Marker 動起來

  • 分享至 

  • xImage
  •  

Marker 也可以很多樣

會介紹到如何讓預設的Marker變成自己畫的Marker,或是自己想要的圖片,還有如標題(Marker動起來)所示,分三種模式,來介紹 Moving Marker的部分。除了介紹 Marker,還有畫線(軌跡)的介紹!

三種模式

  1. 環島只要一分鐘
    IT熊會繞台灣一圈又一圈,一圈所花的時間為1分鐘。
  2. 你追我點
    當滑鼠點地圖中任何一個位置(不包括Marker),IT熊就會跟到那個位置去。
  3. 南漂熊
    承續 Day2 的圖層變變變,會將四個地方分別設為起點(清水),中繼點1(新烏日),中繼點2(左營),終點(電資大樓),有三條的線段,分別以2:3:2的速度去飛。

程式碼

marker1 : 環島只要一分鐘
marker2 : 你追我點
marker3 : 南漂熊
var marker3 = L.icon({
    iconUrl: 'https://i.imgur.com/mRt2rog.png',
    iconSize:     [54.6, 22.7], // size of the icon
    iconAnchor:   [27.3, 11.35], // point of the icon which will correspond to marker's location
    });
    
var p1p2p3p4 = [[24.263936,120.569167], [24.112074,120.615684],
[22.689343 ,120.309121], [22.627560 , 120.267411]];
map.fitBounds(p1p2p3p4);
        
marker3 = L.Marker.movingMarker(p1p2p3p4,[2000, 3000, 2000], {autostart: true,icon: marker3}).addTo(map);
L.polyline(p1p2p3p4, {color: 'red'}).addTo(map);


marker3.once('click', function () {

    marker3.resume();
    marker3.on('click', function() {
        if (marker3.isRunning()) {
            marker3.closePopup();
            marker3.pause();
        } else {
            marker3.closePopup();
            marker3.start();
        }
    });

});

marker3.on('end', function() {
    marker3.bindPopup('<b>Welcome to Kaohsiung !</b>', {closeOnClick: false})
    .openPopup();
});

// ==================================================================================================================================
var marker1 = L.icon({
    iconUrl: 'https://i.imgur.com/mRt2rog.png',
    iconSize:     [54.6, 22.7], // size of the icon
    iconAnchor:   [27.3, 11.35], // point of the icon which will correspond to marker's location
    });
var p123456 = [[24.287939, 120.511924], [24.618813,120.731719],
[25.147408, 121.750569], [24.033423, 121.626818], [21.962351,120.778510],[22.621061,120.256785],[24.287939, 120.511924]];

marker1 = L.Marker.movingMarker(p123456,[10000, 10000, 10000, 10000,10000,10000], {autostart: true, loop: true,icon: marker1}).addTo(map);
marker1.loops = 0;
marker1.bindPopup('', {closeOnClick: false});
marker1.on('loop', function(e) {
    marker1.loops++;
    if (e.elapsedTime < 50) {
        marker1.bindPopup("<b>第 " + marker1.loops + " 圈</b>")
        marker1.openPopup();
        setTimeout(function() {
            marker1.closePopup();
        }, 2000);
    }
});
// ===================================================================================================================================
var marker2 = L.icon({
    iconUrl: 'https://i.imgur.com/mRt2rog.png',
    iconSize:     [54.6, 22.7], // size of the icon
    iconAnchor:   [27.3, 11.35], // point of the icon which will correspond to marker's location
    });
marker2 = L.Marker.movingMarker([[25.034265,121.564515 ]], [],{icon:marker2}).addTo(map);
map.on("click", function(e) {
    marker2.moveTo(e.latlng, 1000);
});

Demo

Yes

Follow me

Ref

工具


上一篇
Day 3 : 圖層變變變
下一篇
Day 5 : 介接API
系列文
ML X 友廷等公車30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
長風青雲
iT邦新手 4 級 ‧ 2019-09-05 14:30:52

原來你這個是這樣做出來的/images/emoticon/emoticon42.gif

阿瑜 iT邦研究生 3 級 ‧ 2019-09-05 16:16:44 檢舉

之後 章節會有更酷的 /images/emoticon/emoticon33.gif
Marker 套入主題,會隨著API call 回來的座標去調整 Marker 的朝向 ~~~

我要留言

立即登入留言