Question

我有这个代码选择餐厅的类型，当我选择任何类型。我们刷新页面并执行一些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
}

这是map div

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

JS for google map

<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>

Answer 1

根据阴郁企鹅的说法，你必须对此进行Ajax调用

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

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

要使用它来加载您的Google地图实例，您可能需要查看以下内容：Load google maps to div loaded by ajax

从select类型中选择时，如何仅刷新div而不是所有页面

1 个答案: