2017-08-30 377 views
1

我使用下面的代碼使用JS加載Google Map。頁面不刷新數據

$(document).ready(function(){ 
    $('.acf-map').each(function(){ 
    map = new_map($(this)); 
    }); 
    var geocoder = new google.maps.Geocoder(); 
    document.getElementById('submit').addEventListener('click', function() { 
    geocodeAddress(geocoder, map); 
    location.reload(); 
    }); 

});

我創建的地圖和標記的使用PHP

<div class="acf-map"> 
    <?php $custom = new WP_Query(array(
     'post_type'   => 'centre', 
     'posts_per_page' => -1 

    )); ?> 
    <?php 
    if ($custom->have_posts()) { 
     while ($custom->have_posts()) { 
      $custom->the_post(); ?> 
      <?php $location = get_field('centre_location'); ?> 

      <div class="marker" data-lat="<?php echo $location['lat'] ?>" data-lng="<?php echo $location['lng']; ?>" style="border: 5px solid grey;"> 
       <a href="<?= the_permalink() ?>"><h5 class="orange"><?= get_field('centre_name'); ?></h5></a> 
       <p class="address"><?php echo get_field('centre_address') ?></p> 
       <p class="orange">Call us at <a href="tel: <?= get_field('centre_telephone_number'); ?>"><?= get_field('centre_telephone_number'); ?></a></p> 

      </div> 

      <?php 
     } 
     wp_reset_postdata(); 
    } 
    ?> 
</div> 

然後,我從用戶輸入取和解碼它推到一個數據庫中。

<input type="text" placeholder="Enter your postcode" class="orange find input" id="address"> 
<button id="submit" class="find sub orange">Search</button> 

function geocodeAddress(geocoder, resultsMap) { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({'address': address}, function(results, status) { 
    if (status === 'OK') { 
     resultsMap.setCenter(results[0].geometry.location); 
     var lat = results[0].geometry.location.lat(); 
     var lng = results[0].geometry.location.lng(); 
     $.ajax({ 
     url: "../link/to/post.php", 
     type: "POST", 
     data : { 
      lat: lat, 
      lng: lng 
     } 
     }); 
     var marker = new google.maps.Marker({ 
     map: resultsMap, 
     position: results[0].geometry.location, 
     title: 'Your location' 
     }); 
    } 
    }); 
} 

數據被推入數據庫,因爲它應該,需要額外的代碼和標記被添加。但是,當頁面刷新時,即使數據庫中的數據被直接插入,也需要刷新才能獲取新數據。

我試過不同的刷新,但沒有一個修復了問題。

我的一個解決方案是找到刷新頁面兩次的方法,但由於我必須加載數百個標記,因此效率不夠高。

回答

0

我回答了我的問題。

問題是,從我猜測,SQL查詢運行速度慢於頁面刷新。

要修復它,我添加了一個延遲。

+0

如何使用回調知道MySQL何時完成,然後添加數據?這樣你可能不需要刷新和延遲。 – kovogel