在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
請幫幫我,謝謝大家