使用Google Maps和React Js ES6显示多个标记

时间:2017-02-23 00:40:59

标签: google-maps reactjs google-maps-api-3 ecmascript-6

我可以显示一个标记但是当我在我的循环中创建新的google.maps.Marker时,不会返回任何内容。有没有人在此之前扼杀过这个?下面的代码和附加的codepen。

Codepen:http://codepen.io/anon/pen/pezqKq?editors=0010

$(document).ready(function() {
    var curFnt = ['Trebuchet MS', 'Verdana', 'Tahoma', 'Palatino',  'Georgia', 'Times New Roman', 'Arial', 'Courier New'];
    var fontSizes = ["38px", "34px", "38px", "34px", "38px", "34px", "38px", "34px"];
    var txtClr = ['Black', 'Red', 'Green', 'Blue', 'Brown', 'Aqua', 'Gold', 'white', 'black'];
    var curBkC = ['white', 'aqua', 'brown', 'yellow', 'lightGreen', 'orange', 'blue', 'lightBlue', 'LightSeaGreen'];

    var clcks = 0;

    $('#cyclStylsArrayCntr').click(function(event){
        var msg = '';

        // clcks is incremented at the end of the function
        // -> clcks is 0 at the first time

        $(".sample2").css('background-color', curBkC[clcks]);
        $(".sample2").css("font-family", curFnt[clcks]);
        $("#currFont").css("font-family", curFnt[clcks]);
        $(".sample2").css("color", txtClr[clcks]);
        $(".sample2").animate({fontSize: fontSizes[clcks]}, "fast");
        $(".sample2").animate({fontSize: '36px'}, "fast");
        $("#currFont").html(curFnt[clcks]);

        clcks = clcks + 1;
        if (clcks >= 8) clcks = 1;
    });
});

1 个答案:

答案 0 :(得分:1)

navLinks.map中,你实际上并没有返回任何东西。您需要返回return navLinks.map((b, i) => { console.log(b.long) return new google.maps.Marker({ position: new google.maps.LatLng(b.lat, b.long), map: this.map }) }) 。你也没有看到console.log,因为你在地图中的return语句下面有它。

/company