未在地图上绘制标记

Question

我已经编写了下面的代码，从数据的角度来看，一切都很好，数据是从 ajax 调用以 JSON 格式返回的，如下面的 sn-p。

问题似乎与addMarker 函数有关，数据已传递到函数中，我已经用addMarker 函数中的alert() 验证了这一点，但地图上没有绘制任何标记并且浏览器或控制台中没有抛出任何错误。

添加每个标记后是否需要调用setMapOnAll 才能在地图上显示？我尝试将setMapOnAll 添加到addMarker 函数的末尾，但没有任何改变。

JSON：

{id:278, title:"", lat:"52.50474200", lng:"-8.71032700"}

Javascript：

$(document).ready(function () {
var map;
var markers = [];

function loadMap()
{
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        minZoom: 2,
        maxZoom: 12,
        zoom: 6,
        disableDefaultUI: true,
        zoomControl: true
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
        });
    } else {
        map.setCenter({lat: -34.397, lng: 150.644});
    }

    loadMarkerData(-1);
}

function addMarker(lat, lng) {
    var marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        map: map
    });
    markers.push(marker);
}


function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function loadMarkerData(selectedKeys, year, source)
{
    var data = {id: 1};

    if (selectedKeys != '' && year != '' && source != '') {
        data = {id: 1, selectedKeys:selectedKeys, year:year, source:source};
    }

    $.ajax(
    {
        url: "ajaxcall.php",
        type: "POST",
        data: data,
        success: function (data, textStatus, jqXHR)
        {
            if (data != '') {
                markerObj = eval(data);

                $.each(markerObj, function(index, element) {
                    addMarker(element.lat, element.lng)
                });
            }
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            console.log(textStatus);
        }
    });
}
});

Answer 1

使用您的原始代码，我收到一个 javascript 错误：Assertion failed: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number，因为这些值是字符串。你可以通过改变这个来解决这个问题：

function addMarker(lat, lng) {
    var marker = new google.maps.Marker({
        position: {
            lat: lat,
            lng: lng 
        },
        map: map
    });
    markers.push(marker);
}

收件人：

function addMarker(lat, lng) {
    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(lat),
            lng: parseFloat(lng)
        },
        map: map
    });
    markers.push(marker);
}