如何迭代数据为谷歌地图创建标记(使用express/jquery/ajax)目前正在获取SyntaxError

How to iterate data to create markers for Google Maps (using express/jquery/ajax) currently getting SyntaxError

本文关键字:jquery SyntaxError express ajax 目前 使用 获取 迭代 何迭代 数据 创建      更新时间:2023-11-29

我在这里初始化了一个谷歌地图:(它运行良好,但我将包括背景)

整个代码位于.ejs文件中

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
    var map;
    var loadMap = function() {
        var myOptions = {
            center: new google.maps.LatLng(39.952335, -75.163789),
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    };
</script>
</head>
<body onload="loadMap()">

然后,当我试图迭代我的日期以添加标记时,我得到了一个错误(代码中没有这个段就可以工作)

到目前为止,我已经做到了:还要注意,由于express(我认为它至少是express),我可以使用<%代码代码code%>在html文件中编写javascript。

<!-- data is an array of arrays [name, lat, lon, description, creator] -->
<% for (var i = 0; i < array[0].length; i++) { 
        var info = new google.maps.InfoWindow();
        info.setContent( %><b><% "Name: "+array[0][i] %></b><% +". Description: "+array[3][i] %><i><% +". Creator: "+array[4][i] %></i><% );
        var newCoords = new google.maps.LatLng(array[1][i], array[2][i]);
        var marker = new google.maps.Marker({
            position: newCoords,
            map: map,
            title: array[0][i],
            if (message == array[0][i]) { // if the creator is currently signed in (his additions should be yellow on map)
                icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
            }
        });
        google.maps.event.addListener(marker, 'click', (function(info, marker) {
            return function() { 
                info.open(map, marker);};
            })(info, marker))
}; %> 

我得到一个意外的令牌:";"如果出现任何混乱,我会尝试为数组中的数据添加新的标记,使其可点击,并在其中显示部分粗体、部分斜体的文本。

此外,我在最后使用闭包来确保每个事件侦听器都是唯一的(从这里复制:Javascript:循环通过数组创建侦听器,通过引用和值调用问题?)

希望比我更有经验的眼睛能发现我的错误或提出更好的选择。。。我试过去掉每一个非必需的分号,但没有成功。。

语法错误,标记应为:

    var marker = new google.maps.Marker({
        position: newCoords,
        map: map,
        title: array[0][i],
        icon : (message == array[0][i])? //use ternary
          'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
          : undefined 
    });

对象文字中不能有if语句,但可以用三元表达式分配图标。如果是图标未定义的问题,您可以在对象文字之外进行:

    var info = new google.maps.InfoWindow(),
    markerDetails;
    //...code
    markerDetails = {
        position: newCoords,
        map: map,
        title: array[0][i]
    };
    if (message == array[0][i]) { 
      markerDetails.icon = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
    }
    var marker = new google.maps.Marker(markerDetails);