在Google地图上绘制Json阵列的LatLng坐标 - 标记全部叠加在同一位置

问题描述

我有一个包含经度和纬度坐标的Json数组。以下是一个示例：

 zones：[{Zip：35824，Latitude：34.647995，Longitude： -86.738549}，... 
  

我试图在数组上使用循环来解析坐标并在谷歌地图上绘制它们。这里是我的Javascript：

  function getLocations（）{
 
 $ .getJSON（http：// localhost：1117 / zones / latlng，function（json）{
 
 var location; 
 
 
 $ .each（json.zones，function（i，item ）{
 location = item.Latitude +'，'+ item.Longitude，addMarker（location）; 
}）; 
 
}）; 
}; 
 
函数addMarker（location）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（location），
 map：地图，
图标：redImage 
}）; 
 markersArray.push（marker）; 
} 
  

我的问题是标记最终堆叠在彼此之上绘制在地图的左上角（在海洋的正中间）。标记堆栈的位置无处出现在我的Json数组中。我认为问题在于新的google.maps.LatLng（）期望（数字，数字） ）作为参数，并以格式number，number传递字符串。

如果将addMarker（）函数更改为具有两个参数（例如纬度，经度）：

  function getLocations（）{
 
 $ .getJSON（ http：// localhost：1117 / zones / latlng，function（json）{
 
 var location; 
 
 
 $ .each（json.zones，function （i，item）{
 addMarker（item.Latitude，item.Longitude）; 
}）; 
 
}）; 
 
 
函数addMarker（lat，lng）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（lat， lng），
 map：地图，
图标：redImage 
}）; 
 markersArray.push（marker）; 
} 
  

I have a Json array that contains latitude and longitude coordinates. Here's a sample:

"zones":[{"Zip":35824,"Latitude":34.647995,"Longitude":-86.738549},...

I'm attempting to use loop over the array to parse the coordinates and plot them on a google map. Here's my Javascript:

function getLocations() {

    $.getJSON("http://localhost:1117/zones/latlng", function (json) {

        var location;


        $.each(json.zones, function (i, item) {
            location = item.Latitude + ',' + item.Longitude, addMarker(location);
        });

    });
};

function addMarker(location) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(location),
        map: map,
        icon: redImage
    });
    markersArray.push(marker);
}

My problem is the markers end up stacked on top of each other plotted in the upper left corner of the map (right in the middle of the ocean). The location where the markers stack appears nowhere in my Json array. What did I do wrong?

解决方案

I think the problem is that new google.maps.LatLng() expects (number,number) as the parameters and you're passing in a string in the format "number,number".

If you change the addMarker() function to have two parameters (e.g. latitude,longitude) that should work:

function getLocations() {

    $.getJSON("http://localhost:1117/zones/latlng", function (json) {

        var location;


        $.each(json.zones, function (i, item) {
            addMarker(item.Latitude,item.Longitude);
        });

    });
}

function addMarker(lat,lng) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            map: map,
            icon: redImage
        });
        markersArray.push(marker);
}

这篇关于在Google地图上绘制Json阵列的LatLng坐标 - 标记全部叠加在同一位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！