我对Custom InfoWindow没什么问题。
当我使用infowindow设置标记时,它无法工作。
它没有错误代码给我。
这是我的代码:
// 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"
}]
}]
});
或者可以去我的jsfiddle,有更详细的代码。 My JSfiddle
关于这一点,我只想在标记中添加两个图表和一个Custom InfoWindow。 但我不知道如何编码,所以我使用另一种方法将Custom标记设置在同一个lat / lng中来做到这一点。
请帮帮我,谢谢。