从 JSON 中的 URL 将标记动态添加到 Google 地图答案

【问题标题】：Dynamically Add Markers to Google Map from URL in JSON从 JSON 中的 URL 将标记动态添加到 Google 地图
【发布时间】：2018-07-30 00:41:27
【问题描述】：

我需要一种基于存储在外部 JSON 文件中的地理坐标（纬度/经度）向 Google 地图动态添加标记的方法。该方法需要调用一个 url 来为每个位置显示一个自定义标记。最终目标是根据观察到的条件为每个位置显示一个特定于天气的图标。

我已经有一个 JSON 调用来在地图窗口中显示天气信息（见下文）：

function initMap() {
    var hc = {lat: 40.466442, lng: -85.362709};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: hc
    });

    var infowindow = new google.maps.InfoWindow({
        content: obj
    });

    var iconBase = "http://icons.wxug.com/i/c/k/cloudy.gif";
        var marker = new google.maps.Marker({
            position: hc,
            map: map,
            title: 'Hartford City',
            icon: iconBase
        });

    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });
}

var downloadJSON = function() {
    $.getJSON( "ajax/GeoObs.json?_="+new Date().getTime(), function( data ) {
        var items = [];
        items.push( "<li id='Weather'>Station: " + data.features[0].properties.Station + "</li>");
        items.push( "<li id='Weather'>Time: " + data.features[0].properties.Time + "</li>");
        items.push( "<li id='Weather'>Weather: " + data.features[0].properties.Weather + "</li>");
        items.push( "<li id='Weather'>Temp: " + data.features[0].properties.Temp + "</li>");
        items.push( "<li id='Weather'>Wind: " + data.features[0].properties.Wind + "</li>");
        obj = $('<div>').append($( "<ul/>", { class: "my-new-list", html: items.join("") })).html();
        initMap();
    });
}

我将如何添加第二个 $.getJSON 以在下面的 JSON 输出中显示来自 URL 的地图标记？

{"features": [{"geometry": {"coordinates": [-85.362709, 40.466442], "type": "Point"}, "properties": {"24-hr Precip": "0.00", "Dewpoint": "26", "Pressure": "30.23", "Ptrend": "+", "Station": "KINHARTF10", "Temp": "30.2 F (-1.0 C)", "Time": "Last Updated on January 24, 12:56 PM EST", "Weather": "Overcast", "Wind": "From the SE at 4.5 MPH Gusting to 6.9 MPH", "icon": "cloudy",
        "icon_url": "http://icons.wxug.com/i/c/k/cloudy.gif"}, "type": "Feature"}], "type": "FeatureCollection"}

【问题讨论】：

标签： json ajax google-maps

【解决方案1】：

您应该在 downloadJSON 和“ajax/GeoObs.json”中添加 lat 和 lng 作为参数？例如 ajax/GeoObs.json?_=date&lat=xx&lng=xxx。您还必须在页面中添加“&lat=xx&lng=xxx”并调用“downloadJSON(lat,lng)”并创建第二个标记

【讨论】：