Google地图：从JSON加载标记 [英] Google Maps: load markers from JSON

问题描述

我有以下JS处理表单，将结果作为JSON返回，然后应该将json绘制为地图上的标记。尽管我确实得到了json响应，但没有绘制任何内容。我不是很熟悉Javascript，所以有人可以告诉我下面的错误是什么？

谢谢

< JSON：

  [
 {
lat：53.598660370500596，
lng：-113.59166319101564
} 
] 
  

Javascript

  $（function（）{
 $（'＃search'）。click（function（）{
 var projectNumber = $（'＃project_number'）。val（）; 
 var setdistance = $（'＃setdistance'）。val（）; 
 var companyType = $（'＃company_type'） .val（）; 
 
 //语法 -  $ .post（'filename'，{data}，function（response）{}）; 
 $ .post（'business_location_get_map.php' ，{
 project_number：projectNumber，
 setdistance：setdistance，
 company_type：companyType 
}，function（ret）{
 $（'＃result'）。html ret）; 
}）; 
}）; 
}）; 
 
函数initialize（）{
 var mapOptions = {
 center：new google.maps.LatLng（53.5435640000，-113.5），
 zoom：8 
}; 
 var map = new google.maps.Map（document.getElementById（map_canvas），
 mapOptions）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
 function plot（）{
 $ .getJSON（'business_location_get_map.php'，function（data）{
 var location; 
 $ .each（data，function （key，val）{
 addMarker（key.lat，key.lng）; 
}）; 
}）; 
 
 
函数addMarker（lat，lng）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（lat， lng），
 map：地图，
图标：redImage 
}）; 
 markersArray.push（marker）; 
} 
 
 google.maps.event.addDomListener（'search'，'click'，plot）; 
  

编辑：

我改变了

 （key.lat，key.lng）
  

至

 （val.lat，val.lng）
  

我仍然有同样的结果，

解决方案 $ c> key.lat 和 key.lng 至 addMarker（），但是 key 是数组中当前元素的索引。您必须使用 val ，因为这是实际值：

  $。each （数据，函数（key，val）{
 addMarker（val.lat，val.lng）; 
}）; 
  

有关 $。each（）： https://api.jquery.com/each/

I have the following JS which processes a form, returns the results as JSON and then should plot the json as markers on the map. Although I do get a json response, nothing is plotted. I'm not very familiar with Javascript, so could someone let me know what the error is below?

Thanks

The JSON:

[
    {
        "lat": "53.598660370500596",
        "lng": "-113.59166319101564"
    }
]

The Javascript

$(function () {
    $('#search').click(function () {
        var projectNumber = $('#project_number').val();
        var setdistance = $('#setdistance').val();
        var companyType = $('#company_type').val();

        //syntax - $.post('filename', {data}, function(response){});
        $.post('business_location_get_map.php', {
            project_number: projectNumber,
            setdistance: setdistance,
            company_type: companyType
        }, function (ret) {
            $('#result').html(ret);
        });
    });
});

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(53.5435640000, -113.5),
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

function plot() {
    $.getJSON('business_location_get_map.php', function (data) {
        var location;
        $.each(data, function (key, val) {
            addMarker(key.lat, key.lng);
        });
    });
}

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

google.maps.event.addDomListener('search', 'click', plot);

EDIT:

I've changed

(key.lat, key.lng)

to

(val.lat, val.lng)

I still have the same results,

解决方案

The problem is about $.each()

You are passing key.lat and key.lng to addMarker(), however key is the index of the current element in array. You must use val as it's the real value:

$.each(data, function (key, val) {
   addMarker(val.lat, val.lng);
});

More info about the usage of $.each(): https://api.jquery.com/each/

这篇关于Google地图：从JSON加载标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！