在Ajax成功上更改Google Map Center

时间:2018-07-21 14:26:29

标签: php ajax google-maps

我的房地产脚本使用的是Google地图。适用于Google地图的脚本如下。

    <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]
                });
            }
        });
    });

1 个答案:

答案 0 :(得分:0)

当我尝试使用默认代码时,控制台上没有错误。但是,当我尝试使用WebCode.ie的代码时,出现了一个错误“在属性lat中不是LatLng或LatLngLiteral:不是数字”。

我将parseFloat()函数用于来自ajax调用的经纬度。然后,我结合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>