gmap3 onclick显示infowindow

时间:2018-06-13 01:25:10

标签: javascript google-maps canvas amcharts jquery-gmap3

我对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中来做到这一点。

请帮帮我,谢谢。

0 个答案:

没有答案