代码之家  ›  专栏  ›  技术社区  ›  Rtra

谷歌地图不加载可变值

  •  0
  • Rtra  · 技术社区  · 6 年前

    我试图通过ajax加载Google地图,但是如果我传递变量,地图不会显示。 location_data

    这是我从JSON和map显示数组的HTML代码

    <div id="print_json">JSON Data Here</div>
    <div id="map"></div>
    

    这是从我的PHP文件返回的

    ["['test 1', 25.1212, 55.1535, 5]","['test 2', 25.2084, 55.2719, 6]","['test 3', 25.2285, 55.3273, 7]"]
    

    这是我的JavaScript

    function initMap(location_data) {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };
    
        // Display a map on the web page
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        map.setTilt(50);
    
        // Multiple markers location, latitude, and longitude
        alert(location_data);
        //var markers = location_data;
        var markers = [
            ['test 1', 25.1212, 55.1535, 5],
            ['test 2', 25.2084, 55.2719, 6],
            ['test 3', 25.2285, 55.3273, 7]
        ];
    
        // Info window content
        var infoWindowContent = [
            ['<div class="info_content">' +
                '<h3>Brooklyn Museum</h3>' +
                '<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'
            ],
            ['<div class="info_content">' +
                '<h3>Brooklyn Public Library</h3>' +
                '<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +
                '</div>'
            ],
            ['<div class="info_content">' +
                '<h3>Prospect Park Zoo</h3>' +
                '<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' +
                '</div>'
            ]
        ];
    
        // Add multiple markers to map
        var infoWindow = new google.maps.InfoWindow(),
            marker, i;
    
        // Place each marker on the map  
        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });
    
            // Add info window to marker    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));
    
            // Center the map to fit all markers on the screen
            map.fitBounds(bounds);
        }
    
        // Set zoom level
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            this.setZoom(5);
            google.maps.event.removeListener(boundsListener);
        });
    
    }
    
    
    // Sets the map on all markers in the array.
    
    // Load initialize function
    //google.maps.event.addDomListener(window, 'load', initMap);
    
    $(document).ready(function() {
        var location_data;
        $("#mapped").on("change", function() {
            var dataname = $(".selectpicker option:selected").val();
            $.ajax({
                url: "findforwork.php",
                //contentType: "application/json; charset=UTF-8",
                //dataType: "application/json",
                type: "POST",
                data: "searchid=" + dataname,
                success: function(response) {
                    //alert('Success' + response);
                    $("#print_json").html(response.replace(/\"/g, ""));
                    console.log(JSON.parse(response));
                    var location_data = response.replace(/\"/g, "");
                    var mapDiv = document.getElementById('map');
                    google.maps.event.addDomListener(mapDiv, "load", initMap(location_data));
                }
            }); //End Of Ajax
        }); //End of mapped
    });
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   Jonathan Gagne    6 年前

    JSON.parse() 之后 .replace()

    var response= '["[\'test 1\', 25.1212, 55.1535, 5]","[\'test 2\', 25.2084, 55.2719, 6]","[\'test 3\', 25.2285, 55.3273, 7]"]';
    var location_data = JSON.parse(response.replace(/\"/g, "").replace(/\'/g, "\""));
    console.log(location_data);
    

    0: Array(4) [ "test 1", 25.1212, 55.1535, … ]
    1: Array(4) [ "test 2", 25.2084, 55.2719, … ]
    2: Array(4) [ "test 3", 25.2285, 55.3273, … ]