如何基於用戶位置居中谷歌地圖

Question

我有這個腳本調用帖子爲標誌進入谷歌地圖：

<?php 
$args = array('post_type' => 'braiders', 'posts_per_page' => -1); 
$the_query = new WP_Query($args); 
if ($the_query->have_posts()): ?> 
<!-- WordPress has found matching posts --> 
<div class="results-main-content"> 
    <div class="results-group-items"> 
     <?php $i = 1; ?> 
     <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
     <?php if (get_post_meta($post->ID, 'martygeocoderlatlng', true) !== '') : ?> 
     <div class="result-list-items"> 
      <div class="results-left"> 
       <?php 
       if (has_post_thumbnail()) { 
        // Get the post thumbnail URL 
        $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); 
        ?> 

       <a href="<?php the_permalink(); ?>"><div class="result-items-image" style="background-image: url(<?php echo $feat_image; ?>);"> 
        <p><?php the_title(); ?> 
        </p> 
       </div> 
       </a> 
       <?php } ?> 
       <!-- .result-items-image --> 
      </div> 
      <!-- results-left --> 
      <div class="result-right"> 
       <?php the_content(); ?> 
      </div> 
      <!-- result-right --> 
     </div> 
     <!-- result-list-items --> 
     <?php endif; ?> 
     <?php $i++; ?> 
     <?php endwhile; ?> 
    </div> 
    <!-- results-group-items --> 
    </div> 
    <!-- .results-main-content --> 
    <script type="text/javascript"> 
    var locations = [ 
     <?php $i = 1; while ($the_query->have_posts()) : $the_query->the_post(); ?> 
    <?php if (get_post_meta($post->ID, 'martygeocoderlatlng', true) !== '') : ?> { 
     latlng: new google.maps.LatLng <?php echo get_post_meta($post->ID, 'martygeocoderlatlng', true); ?>, 
     info: document.getElementById('item<?php echo $i; ?>') 
    }, 
    <?php endif; ?> 
    <?php $i++; endwhile; ?> 
]; 
</script> 

，並顯示在地圖上基於手動編碼的經緯度這下腳本：

var infowindow = new google.maps.InfoWindow(); 
var pinkmarker = new google.maps.MarkerImage('/wp- content/themes/halfempty/pink_Marker.png', new google.maps.Size(18, 32)); 
var shadow = new google.maps.MarkerImage('/wp- content/themes/halfempty/shadow.png', new google.maps.Size(37, 34)); 

function initialize() { 
map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: new google.maps.LatLng(35.1495343, -90.0489801), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: locations[i].latlng, 
     icon: pinkmarker, 
     shadow: shadow, 
     map: map 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(locations[i].info); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 

} 

我想知道如何改變上面的.js腳本，該腳本將Google的中心設置爲當用戶通過瀏覽器訪問該頁面時根據用戶位置實際居中對齊嗎？ 我所知道的是我需要動態拉動訪問者/用戶的latlng而不是手動編碼它。 感謝您對此採取措施。

Answer 1

您可以使用下面的腳本：

if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
    user_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    map.setCenter(user_location); 
    }); 
} else { 
    /* Browser doesn't support Geolocation */ 
}  

警告：有些瀏覽器不無SSL支持這一點。從Chrome 50開始，Geolocation API僅適用於HTTPS等安全上下文。如果您的網站位於非安全來源（例如HTTP）上，則獲取用戶位置的請求將不再起作用。

現在您的代碼應該是這樣的：

var infowindow = new google.maps.InfoWindow(); 
var pinkmarker = new google.maps.MarkerImage('/wp- content/themes/halfempty/pink_Marker.png', new google.maps.Size(18, 32)); 
var shadow = new google.maps.MarkerImage('/wp- content/themes/halfempty/shadow.png', new google.maps.Size(37, 34)); 

function initialize() { 
map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: new google.maps.LatLng(35.1495343, -90.0489801), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: locations[i].latlng, 
     icon: pinkmarker, 
     shadow: shadow, 
     map: map 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(locations[i].info); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 

    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     user_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     map.setCenter(user_location); 
     }); 
    } else { 
     /* Browser doesn't support Geolocation */ 
    } 

}