Question

以下程序的目的是从Web服务获取json（长/纬）数据，然后将接收的数据插入标记，然后使用标记呈现Google地图。我已经尝试了各种策略（例如，在这里和那里保持ajax调用）但是它没有用，无论是在Google Map渲染之后Ajax调用发生的原因，它都没有对Markers做任何事情。（有时候它没有根本不渲染地图。从Google地图中提供的示例按照定义工作，但根据我的目标，它不起作用。请你告诉我这里我缺少的东西。

   <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script); });

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    var latlngData = 0;    

            $.ajax({
  type:'GET',
  url: 'http://localhost:8080/xyz-service/xyz/xyzData/24252627',
  dataType: 'json',
  success: function(data) {
  latlngData = data; 
  console.log(latlngData);  
    },
    error: function(){
        $('#output ul').append('<li>Error');
    }
 });


// Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map, same info for everyone, just an example
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map, fetching avg_gps_latitude,   avg_gps_longitude from latlngData, received from ajax call ( but it dodn't work)

    for( i = 0; i < latlngData.length; i++ ) {
        var position = new google.maps.LatLng(latlngData[i].avg_gps_latitude,latlngData[i].avg_gps_longitude);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: latlngData[i].ssid
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[0][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}


    </script>
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      #map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}
    </style>
  </head>
  <body>


<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>




  </body>
</html>

Answer 1

我建议进行以下更改：

1）由于默认情况下jQuery.ajax() async ，因此当标记初始化时，success可能尚未填充。例如，将标记初始化放入.done()回调或google.maps.event.addDomListener(window, 'load', initialize);函数中（参见下面的示例）

2）您可以使用function initialize() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: 'roadmap' }; // Display a map on the page map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); map.setTilt(45); var latlngData = 0; // Info Window Content var infoWindowContent = [ ['<div class="info_content">' + '<h3>London Eye</h3>' + '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'], ['<div class="info_content">' + '<h3>Palace of Westminster</h3>' + '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + '</div>'] ]; // Display multiple markers on a map, same info for everyone, just an example var infoWindow = new google.maps.InfoWindow(), marker, i; // Loop through our array of markers & place each one on the map, fetching avg_gps_latitude, avg_gps_longitude from latlngData, received from ajax call ( but it dodn't work) loadLocations().done(function (latlngData) { for (i = 0; i < latlngData.length; i++) { var position = new google.maps.LatLng(latlngData[i].avg_gps_latitude, latlngData[i].avg_gps_longitude); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: latlngData[i].ssid }); // Allow each marker to have an info window google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infoWindow.setContent(infoWindowContent[0][0]); infoWindow.open(map, marker); } })(marker, i)); // Automatically center the map fitting all markers on the screen map.fitBounds(bounds); } }); // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) { this.setZoom(14); google.maps.event.removeListener(boundsListener); }); } function loadLocations() { return $.ajax({ type: 'GET', url: 'https://gist.githubusercontent.com/vgrem/5be61555df259d8cbefe/raw/9ca707b3141a29f58c8281684dfc778a5e6eb035/LondonData.json', dataType: 'json' }); } google.maps.event.addDomListener(window, 'load', initialize);

代替动态加载Google Maps API

修改后的示例

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<div id="map_wrapper">
        <div id="map_canvas" class="mapping"></div>
</div>

        <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">  
 <translate 

         android:fromXDelta="-6%p" android:toXDelta="50%p"
         android:duration="2000"/>

Plunker

Answer 2

marker = new google.maps.Marker（{ 位置：位置，地图：地图， title：latlngData [i] .ssid }）;

创建标记时，状态“map：map”在代码中不执行任何操作，因为“map”变量是未定义的。

相反，您应该将引用传递给您在“初始化”函数中创建的“map”对象。

要修复它，您应该将“map”变量设置为全局，因此它也可以在“Initialize”函数之外访问。

如何在Ajax调用后使用标记渲染Google地图

2 个答案: