Question

TL; DR：我有一个名为company的MySQL表，我想要检索2个字段（lat，long）以在Google Maps中加载地址。所以我在map.js文件中的函数initMap（lat，long）需要这两个参数。

如何在AJAX调用后将这些值传递给加载地图的JS函数？

AJAX功能

function searchCompany() {
            $.ajax({
                type: 'post',
                url: 'ajax/search-company.php',

                data: {
                    data:idComp
                },
                success: function (response) {
                    document.getElementById("company").innerHTML=response;
// CALL INITMAP() HERE!
                    }
                });
            }

Google Maps脚本标记

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
</script>
<script src="js/map.js"></script>

Map.js

function initMap(lat, long) {

var location= new google.maps.LatLng(lat, long);
var mapEl= document.getElementById('map');
var mapOpt= {
    center: location,
    zoom: 15,
    panControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapEl, mapOpt);

// Add marker
var imgMarker= {
    url: 'img/marker.png',
    scaledSize: new google.maps.Size(50, 50)
}
var marker= new google.maps.Marker({
    position: location,
    map: map,
    icon: imgMarker
});

var contentString= '<div class="info-window">'+
                      '<h3>Info</h3>'+
                      '<div class="info-content">'+
                      '<p>Text</p>'+
                      '</div>'+
                      '</div>';

var infoWindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 400
});

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

Answer 1

你的后端需要返回json让你抓住jQuery＆＃39; s ajax

<?php
....
$result = ['lat'=>12.34, lng=>56.78];

echo json_encode($result);

然后您可以将其作为对象而不是html

接收

$.ajax({
  type: 'post',
  url: 'ajax/search-company.php',
  dataType:'json',
  data: {
     data:idComp
  },
  success: function (response) {
    // response is an object with lat and lng properties
    initMap(response.lat, response.lng);
  }
});

Answer 2

为什么不在json中返回坐标？不要为该页面返回整个html。获得坐标后，只需重新启动地图即可。

在PHP中调用AJAX后加载Google Maps选项

2 个答案: