地图上未绘制标记

Markers not being drawn on map

本文关键字：绘制 地图      更新时间：2023-09-26

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

问题似乎出在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);
        }
    });
}
});

使用原始代码，我得到一个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);
}
相关文章：