通过 jquery 将字符串加载到谷歌地图中

Question

我在谷歌地图中有两个变量，标记和 infoWindowContent 我需要通过 jquery (ajax/php/mysql db) 更新。是否可以加载使用 jquery/ajax 生成的变量并刷新地图？

我可以使用 jquery 动态生成标记的内容，但首先加载谷歌地图，然后生成标记，给我一张空白地图。

理想情况下，我希望能够：

点击事件

 $.ajax({
     url:'script.php?do=get_accs2&area='+area,
     type:'post',
     dataType: 'json',
     success: function(data){
       map_markers = data;
  });//end ajax

用新的标记刷新谷歌地图

initMap();

重新运行以下内容

 <script>
        function initMap() {
            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);


            // Multiple Markers
            var markers = map_markers;

            // 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
            var infoWindow = new google.maps.InfoWindow(), marker, i;

            // Loop through our array of markers & place each one 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]
                });

                // Allow each marker to have an info window    
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infoWindow.setContent(infoWindowContent[i][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(12);
                google.maps.event.removeListener(boundsListener);
            });

        }


    </script>

Answer 1

一旦标记数据可用，一种选择是在 AJAX 回调函数中调用 initMap。

$.ajax({
  url:'script.php?do=get_accs2&area='+area,
  type:'post',
  dataType: 'json',
  success: function(data){
    map_markers = data;
    initMap();
});//end ajax