如何基于用户位置居中谷歌地图

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 */ 
    } 

}