Question

使用AJAX单击按钮时，我正在加载页面。我在正常页面上有一张地图，该地图可以加载并显示正常，但是当我将其添加到加载的页面时，它不会显示或出现任何错误？我尝试在ajax加载后将initmap（）添加到代码中，但注意吗？我必须绑定它吗？

我在做什么错了？

地图的代码是：-

<div id='map-canvas'></div>

JS

function initMap() {
  var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}

initMap();



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

加载按钮的代码是

$(document).ready(function(){
    $(".mainstuff button").click(function(){
        $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "get_job_details.php?job_id="+status;
        //alert(status);
        $("#div1").load(new_url);

    });
});

产生以下内容：-

echo "<div id='map-canvas'></div><table class='mainTable'>
<tbody>
<tr>
<td width='50%' style='vertical-align: top'><li>Pick up time : <B>".$new_date."</B></li><li>Pick up time : <B>".$p_time."</B></li><li>Pick up address : <B>".$p_address."</B></li><li>Destination address : <B>".$d_address."</B></li><li>Return date : <B>".$d_date_new."</B></li><li>Return time : <B>".$d_time."</B></li><li>Number of passengers : <B>".$pax."</B></li><li>Estimated distance : <B>".$est_dist."</B></li><li>Estimated time : <B>".$est_time."</B></li><li></li></td>
<td width='50%' id='description'><li>Purpose : <B>".$purpose."</B></li><li>Extra requirements : <B>".$list."</B></li><li>Notes : <B>".$notes."</B></li><li>Total current bids : <B>".$total_bids."</B></li><li>Current lowest bid : <B>£".$lowest_bid_price."</B></li><li>Your bids on this job : <B>".$your_bids."</B></li><li>Your current lowest bid : <B>£".$my_lowest_bid."</B></li><li>Make a new bid of : £<input id='bid_amount' type='text'><li><textarea id='extras' class='extras' placeholder='Enter any information you would like the customer to know'></textarea></li><button id='makebid' data-name='".$job_id."' type='button' class='btn btn-bid'><span class='glyphicon glyphicon-pencil'></span> MAKE BID </button></li><div id='actions'><button type='button' class='btn btn-success' onclick='closedown()'><span class='glyphicon glyphicon-remove-circle'></span> CLOSE </button></div></td>
</tr>
</tbody>
</table>";
}

Answer 1

例如，尝试在ajax加载后添加initMap（）来更改ajax代码

$(document).ready(function(){   
    $(".mainstuff button").click(function(){    
        var status = $(this).attr("data-name");
        $('#loader').show();
        $.ajax({
            url : "get_job_details.php",
            cache: false,
            data: { 'job_id':status },
            type: 'GET', 
            success : function(data) {
                $("#div1").html(data);
                $('#loader').hide();
                initMap();
            },
            error: function(data) {
                $('#loader').hide();
            }
        });
    });
});

GoogleMap未显示在Ajax加载页面中

1 个答案: