Javascript 如何根据用户位置将谷歌地图居中

我有一个脚本，可以将帖子作为标记调用到Google地图中：

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

变量位置=[
{
latlng：新的google.maps.latlng，
信息：document.getElementById（'item'）
},
];

下一个脚本根据手动编码的latlng显示地图：

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

}

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））；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'），{
缩放：12，
中心：新google.maps.LatLng（35.1495343，-90.0489801），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
对于（var i=0；i

我想知道，当用户通过浏览器访问页面时，如何修改上面的.js脚本，使Google根据用户位置实际居中地图？ 我所知道的只是我需要动态地拉取访问者/用户的latlng，而不是手动对其进行编码。

---

感谢您尝试一下。

您可以使用以下脚本：

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，某些浏览器不支持此功能。从Chrome50开始，地理定位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 */
    }   

}

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））；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'），{
缩放：12，
中心：新google.maps.LatLng（35.1495343，-90.0489801），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
对于（var i=0；i

谢谢你，尼克。我相信这是来自谷歌地图API文档，但实际上我不知道在我的代码中在哪里实现它。我编辑了我的答案，以显示您应该将它放在哪里。抱歉，它没有。需要的只是将地图中心放在访客位置，但仍然显示从自定义post类型查询中提取的现有标记。例如，地图对中是硬编码的，它需要是动态的。