Google maps API: JSON to jQuery

Google maps API: JSON to jQuery

本文关键字：to jQuery JSON maps API Google      更新时间：2023-09-26

我有麻烦让我的标记显示使用谷歌地图API V3。

这是我的JavaScript:

function getMap(zoom, center) {
var myOptions = {
    zoom: zoom,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({ position: centerBegin })
$.getJSON('json/markers.json', function (data) {
    $.each(data, function (i, marker) {
        var markerOptions = { map: map, position: new google.maps.LatLng(marker.latitude, marker.longtitude) , title: 'test'};
        var marker = new google.maps.Marker(markerOptions);
        /*var marker = new google.maps.Marker({
            position: new google.maps.LatLng(marker.latitude, marker.longtitude),
            content: i.toString(),
            map: map,
            title: 'test'
        });*/
    });
});

}

这是我的JSON文件: 
{"markers": [ 
    {"text":"Ondertekenen koopverkoopcontract", "latitude":-12.917239,     "longtitude":-38.48209},
    {"text":"Openen documentair krediet", "latitude":51.218584, "longtitude":4.40413},
    {"text":"Transport van producent naar haven Salvador", "latitude":51.22952, "longtitude":4.411617},
    {"text":"Vertrek naar haven Antwerpen", "latitude":-12.968114, "longtitude":-38.511543},
    {"text":"Aankomst haven Antwerpen + vertrek naar Transibel", "latitude":51.22952, "longtitude":4.411617},
    {"text":"Aankomst Transibel", "latitude":51.094863, "longtitude":4.12973},
    {"text" : "center point", "latitude":28.767659, "longtitude":-31.640625}
]}
我在地图上看不到任何标记。有人能帮我一下吗?

您发布的示例代码有两个问题。

  1. 当你真正想迭代data['markers']时，迭代data。如果你看看你的JSON文件，你会看到它不是一个array，而是一个object，其markers元素持有一个array的标记信息。

  2. 过度使用marker变量，如graphicdivine指出的

看起来您在each循环中重新声明了marker，如下所示。

$.each(data, function (i, marker) {
//--------------------------^
    // [...]
    var marker = new google.maps.Marker(markerOptions);
//--------^
相关文章：