iT邦幫忙

0

請問怎麼讓map marker有自訂的綁定圖表及自訂infowindow?

  • 分享至 

  • xImage

在Gmap3套件裡面我有個小疑問,為何新增有自訂的infowindow的marker之後,他沒有反應呢?
不僅如此,系統也沒有報error code出來。
以下是我的code

// test gmap3 feature
// set lat/lng for map's center
var uluru = {
    lat: -25.363,
    lng: 131.044
};
let markerShanhua = [23.11509722, 120.2971417];

// set map
let map = $('#map').gmap3({
    zoom: 10,
    address: "Taiwan Tainan",
    mapTypeId: google.maps.MapTypeId.ROADMAP
});


// draw charts
map.marker({
    position: markerShanhua
}).overlay({
    position: markerShanhua,
    content: ShanhuaChart1,
    x: 30,
    y: -50
});

map.marker({
    position: markerShanhua
}).overlay({
    position: markerShanhua,
    content: ShanhuaChart2,
    x: -200,
    y: -75
});

// set markers with infowindow
map.marker({
    address: "Taiwan Tainan"
}).infowindow({
    content: "Hello from Uluru"
}).then(function (infowindow) {
    console.log("this is this");
    console.log(this);
    console.log("this is infowindow");
    console.log(infowindow);
    var map = this.get(0);
    var marker = this.get(1);
    console.log("this is map");
    console.log(map);
    console.log("this is marker");
    console.log(marker);
    marker.addListener('click', function () {
        infowindow.open(map, marker);
    });
});

// do draw charts by html element
//Shanhua
var _ShanhuaChart1 = new CanvasJS.Chart("ShanhuaChart1", {
    title: {
        text: "AQI"
    },
    animationEnabled: true,

    backgroundColor: "rgba(255,255,255,0.5)",

    data: [{
        type: "spline",
        dataPoints: [{
                x: new Date('2018-05-12 03:00:00'),
                y: 460
            },
            {
                x: new Date('2018-05-12 04:00:00'),
                y: 450
            },
            {
                x: new Date('2018-05-12 05:00:00'),
                y: 500
            },
        ]
    }]
});
_ShanhuaChart1.render();
var _ShanhuaChart2 = AmCharts.makeChart("ShanhuaChart2", {
    "hideCredits": true,
    "type": "gauge",
    "theme": "light",
    "axes": [{
        "axisAlpha": 0,
        "tickAlpha": 0,
        "labelsEnabled": false,
        "startValue": 0,
        "endValue": 100,
        "startAngle": -150,
        "endAngle": 150,
        "bands": [{
            "color": "rgba(200,200,200,0.4)",
            "startValue": -1,
            "endValue": 100,
            "radius": "100%",
            "innerRadius": "85%"
        }, {
            "color": "#84b761",
            "startValue": -1,
            "endValue": 10,
            "radius": "100%",
            "innerRadius": "85%",
            "balloonText": "UVI : 5"
        }, {
            "color": "rgba(200,200,200,0.4)",
            "startValue": 0,
            "endValue": 100,
            "radius": "80%",
            "innerRadius": "65%"
        }, {
            "color": "#fdd400",
            "startValue": 0,
            "endValue": 50,
            "radius": "80%",
            "innerRadius": "65%",
            "balloonText": "溫度 : 6 °C"
        }]
    }]
});

裡面主要想新增有兩個自訂chart的marker以及自訂的infowindow,不過我一直沒辦法使用一次marker就把兩個自訂的chart新增進去,所以換了一種方法:連續新增2個marker在同樣位置上,而marker個別帶一個自訂的chart
可是後來要在新增infowindow的marker時候就出現了這個狀況,他的事件完全沒反應,也沒有出現錯誤訊息,不知道怎麼了。

我的問題描述可能沒有很清楚,所以附上我的JSfiddle給大家看
My code

主要的問題是想新增自訂的2個chart及自訂的infowindow在marker上
而用到的套件有amChart.js,canvas.js及主要的Gmap3.js
請幫幫我,謝謝大家

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答