Question

我有以下HTML;

    <div class="event-details-container">
<div class="event-details">
<div class="adress">My adress</div>
<div class="arranger">My arranger</div>
<div class="title">My title</div>
<div class="date">My date</div>
</div>
<div class="event-details">
<div class="adress">My adress 2</div>
<div class="arranger">My arranger 2</div>
<div class="title">My title 2</div>
<div class="date">My date 2</div>
</div>
</div>

我有以下JS：

    var myMarkers = "";
$('.event-details-container .event-details').each(function (index) {
    myMarkers += "{ address: " + $(this).children(".adress").text() + ", html: " + "<div style='font-siz:14px;font-weight:bold'>" + $(this).children(".title").text() + "</div>" + $(this).children(".date").text() + "<br/>" + $(this).children(".arranger").text() + "<br/>" + $(this).children(".adress").text() + "},";
});

$(".google-map").gMap({ markers: [myMarkers.slice(0, -1)],
    address: "Washington DC, US",
    zoom: 6
});

上面的JS基于http://gmap.nurtext.de/（jQuery插件）。但上面的代码不起作用 - 地图显示，但没有标记 - 所以我要整理的Json“字符串”一定有问题 - 但是什么？

Answer 1

我不是一个javascript人......所以有人可能需要稍微清理一下。

查看插件的文档，您需要提供一个包含以下内容的对象：

一个名为address的字符串

一个名为zoom的数字

一个名为markers的数组，它包含包含

一个名为address的字符串
一个名为html的字符串。

var myMarkers = [];
$('.event-details-container .event-details').each(function (index) {
    var myHtml = "<div style='font-siz:14px;font-weight:bold'>" + 
              $(this).children(".title").text() + "</div>" + 
              $(this).children(".date").text() + "<br/>" + 
              $(this).children(".arranger").text() + "<br/>" + 
              $(this).children(".adress").text();

    myMarkers.push({ address: $(this).children(".adress").text(), html : myHtml}); 
});

var myObj = { address : "Washington, DC", zoom : 6, markers : myMarkers };

$(".google-map").gMap(myObj);

（我把事情搞得一团糟，以便你可以处理正在发生的事情）

gMap JSON字符串？

1 个答案: