0

我有这个选择餐厅类型的代码，当我选择任何类型时。我们刷新页面并执行一些 SQL 过程来获取我选择的所有餐厅类型并将其显示在 Google 地图中。

那么，如何在不刷新所有页面的情况下做到这一点。

仅刷新 Google 地图 div。

<select class="mapleftS" name="type" id="type" onchange="changeType(this.value)">
    <option value="0">كل الانواع</option>
    <?$type = mysql_query("select * from rest_type ");
    while($rod = mysql_fetch_array( $type )) {
        if($rod[id] == $_REQUEST['type'])
            $selll = 'selected';
        else {$selll = '';
    ?>
    <option value="<?=$rod[id]?>" <?=$selll?> ><?=$rod[name]?></option>
    <? } ?>                                            
</select>
<script>
    function changeType( id ) {
        parent.location = '?type=' + id;
    } 
    $(function() {
        var text_menu = $("#type option:selected").text();
        $("#ddddd_").html(text_menu);
    });
</script>

当我选择它是做这个代码： -

if($_REQUEST['type']) {
// do some thing and refrsh map div
} else {
// do some thing and refrsh map div
}

这是地图 div

<div id="mppp" class="map"></div>

谷歌地图的JS

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAsVCH2AY7nJecNz41eiAGCMdupbk0qNnE&sensor=true"></script>

<script type="text/javascript">
  var address_index = 0, map, infowindow, geocoder, bounds, mapinfo, intTimer;
  $(function (){
    mm();   
  });

  mm = function() {
    // Creating an object literal containing the properties you want to pass to the map
    var options = {
      zoom: 15,
      center: new google.maps.LatLng(24.701564296830245, 46.76211117183027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Creating the map
    map = new google.maps.Map(document.getElementById('mppp'), options);
    infowindow = new google.maps.InfoWindow();
    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds();

    //******* ARRAY BROUGHT OVER FROM SEARCHRESULTS.PHP **********
    mapinfo = [ <?=$da?> ];
    intTimer = setInterval("call_geocode();", 300);
  }

  function call_geocode() {
    if( address_index >= mapinfo.length ) {
      clearInterval(intTimer);
      return;
    }
    geocoder.geocode({
      location: new google.maps.LatLng(mapinfo[address_index][6], mapinfo[address_index][7])
    }, (function(index) {
          return function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              // Scale our bounds
              bounds.extend(results[0].geometry.location);
              var $id = mapinfo[index][0];
              var $tell = mapinfo[index][3];
              var $title = mapinfo[index][2];
              var $img_src = mapinfo[index][3];
              var img_src = mapinfo[index][1];
              var $logo = mapinfo[index][4];
              var $status = mapinfo[index][5];
              var $sell = mapinfo[index][6];
              var $city = mapinfo[index][8];
              var marker = new google.maps.Marker({
                position: new google.maps.LatLng(mapinfo[index][6], mapinfo[index][7]),
                icon: {
                  url : '<? bloginfo('url'); ?>' + img_src  + '',
                  scaledSize : new google.maps.Size(50,50)
                },
                map: map,
                scrollwheel: false,
                streetViewControl: true,
                title: $title
              });
              google.maps.event.addListener(marker, 'click', function() {
                // Setting the content of the InfoWindow
                if (img_src) {
                  var imdd = '<img src="<? bloginfo('url'); ?>' + img_src  + '" width="60" height="60" style="margin-left:4px;float:right;" />';
                }
                else {
                  var imdd = '';
                }

                if ($tell) {
                  var tell = 'رقم الهاتف : '+$tell+'<br>';
                }
                else {
                  var tell = '';
                }                               

                if ($status) {
                  var status = 'الحي : '+$status+'<br>';
                }
                else {
                  var status = '';
                }

                if ($city) {
                  var city = 'المدينة : '+$city+'<br>';
                }
                else {
                  var city = '';
                }

                var content = '<div id="info" style="direction:rtl;font:15px time new roman;font-weight:bolder;position:relative;width:210px;"><a href="#"><div style=" font-size:13px;font-family:Tahoma;font-weight:bolder;text-align:center;font-weight:bold">' + $title + '</div><br><div style="float:right">' + imdd + '</div><div style="float:right;text-align:right;font-family:Tahoma">' + tell + city + status + '</div></a><br /><a style="float:left;color:#d22f00;font-size:12px;font-family:Tahoma" href="<? bloginfo('url'); ?>/rest-det/?id=' + $id + '">المزيد+</a></div>';
                infowindow.setContent(content);
                infowindow.open(map, marker);
              });

              map.fitBounds(bounds);

              if (mapinfo.length == 1) {
                map.setZoom(12);
              }
            }
            else {
                // error!! alert (status);
            }
          }
        }
      )(address_index)
    );
    address_index++;
  }
  </script>
<div id="mppp" class="map"></div>
4

1 回答 1

0

根据Gloomy Penguin，您必须为此执行Ajax调用

如果您的页面中包含 Jquery，则可以使用以下代码：

$('.maplefts').on('change', function() {
    $.ajax({
        url: '/post_url',
        data: $(this).serialize(),
        success: {
            alert('success');
            //put code to change DIV here
        }
    });
});

要使用它来加载你的谷歌地图实例，你可能想看看这个：Load google maps to div loaded by ajax

于 2013-10-26T18:29:12.793 回答