Question

我有这个帖子将帖子作为标记称为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显示地图的下一个脚本：

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

}

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

1 个答案: