更改 ajax 成功的谷歌地图中心答案

【问题标题】：Change google map center on ajax success更改 ajax 成功的谷歌地图中心
【发布时间】：2018-07-21 14:26:28
【问题描述】：

我正在为我的房地产脚本使用谷歌地图。下面是适用于谷歌地图的脚本。

    <script type='text/javascript'>
var map;
    var marker;
    var coordinates = '';
  function initialize() {

    var mapOptions = {
              center: new google.maps.LatLng(41.070778,29.057808),

      zoom: 14,
      mapTypeId: 'roadmap'
   };

    map = new google.maps.Map(document.getElementById('map-canvas-ajax'), mapOptions);
       google.maps.event.addListener(map, 'click', function(event) {
          var lat = event.latLng.lat().toFixed(6);
          var lng = event.latLng.lng().toFixed(6);
          createMarker(lat, lng);
          getCoords(lat, lng);
       });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

创建地图没有问题。当用户选择城市、州和社区时，我正在使用地理编码 api 从我的 ajax 页面上的地址获取纬度和经度。这里也没有问题。但是当我尝试为地图设置新中心时，虽然我有正确的纬度和纬度，但没有任何反应。它仍然显示中心的默认 lang 和 lat。

$('select[name="ads_neighborhoods"]').change(function() {
        var city = $("select[name='ads_city'] option:selected").html();
        var county = $("select[name='ads_county'] option:selected").html();
        var area = $("select[name='ads_area'] option:selected").html();
        var neighborhoods = $("select[name='ads_neighborhoods'] option:selected").html();

        $.ajax({
            type:'POST',
            url:'ajax/map.php',
            data:{'city':city, 'county':county, 'area':area, 'neighborhoods': neighborhoods},
            success:function(result){
                var data = result;
                var coordinates = new Array();
                var coordinates = data.split(",");
                map.setCenter({
                    lat : coordinates[0],
                    lng : coordinates[1]
                });
            }
        });
    });

【问题讨论】：

你试过map.panTo({lat : coordinates[0], lng : coordinates[1]})试试看，如果它适合你，请告诉我
当我尝试 map.panTo() 时出现错误。 “不是 LatLng 或 LatLngLiteral：在属性 lat：不是数字”我解决了这个错误的问题。谢谢^^

标签： php ajax google-maps

【解决方案1】：

当我尝试使用我的默认代码时，控制台上没有错误。但是当我尝试 WebCode.ie 的代码时，出现错误“not a LatLng or LatLngLiteral: in property lat: not a number”。

我对来自 ajax 调用的 lat/lang 使用了 parseFloat() 函数。然后我结合 map.panTo() 函数。它奏效了。

<script>
    $('select[name="ads_neighborhoods"]').change(function() {
        var city = $("select[name='ads_city'] option:selected").html();
        var county = $("select[name='ads_county'] option:selected").html();
        var area = $("select[name='ads_area'] option:selected").html();
        var neighborhoods = $("select[name='ads_neighborhoods'] option:selected").html();

        $.ajax({
            type:'POST',
            url:'ajax/map.php',
            data:{'city':city, 'county':county, 'area':area, 'neighborhoods': neighborhoods},
            success:function(result){
                var data = result;
                var coordinates = new Array();
                var coordinates = data.split(",");
                var lat = parseFloat(coordinates[0]);
                var lng = parseFloat(coordinates[1]);
                map.panTo({lat : lat, lng : lng});
                map.setZoom(14);
            }
        });
    });
</script>

【讨论】：