Question

我编写了下面的代码，从数据的角度来看，所有代码都是正常的，数据是从JSON格式的ajax调用返回的，如下面的代码片段所示。

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

添加每个标记后，是否需要拨打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);
}

标记不在地图上绘制

1 个答案: