gmap3 нажмите, чтобы показать информационное окно - PullRequest
Новая
       16

gmap3 нажмите, чтобы показать информационное окно

0 голосов
/ 13 июня 2018

У меня небольшая проблема с 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, там есть более подробный код. Мой JSfiddle

Все об этом, я просто хочу добавить две диаграммы и пользовательское информационное окно в маркер.Но я не знаю, как кодировать, поэтому я использую другой способ, чтобы установить пользовательские маркеры в том же широте / ширине, чтобы сделать это.

Пожалуйста, помогите мне, спасибо.

...