如何在谷歌地图上添加当前位置标记

How to add a current location marker on Google Map

本文关键字：位置添加谷歌地图更新时间：2023-09-26

我最近开发了一个网站，但在找到位置后，我无法在谷歌地图上显示当前位置标记。

你可以看看https://www.storra.com/listings/

我在函数.php中添加了一个基于Listify自动定位函数的自定义侦听器，但没能将标记添加到地图中。代码如下，

function listify_custom_autolocation() {
	if ( ! ( is_front_page() || listify_is_job_manager_archive() ) ) {
		return;
	}
?>
	<script>
		var triggered = false;
		jQuery(document).on( 'facetwp-loaded', function() {
			if ( ! triggered ) {
				var locate = jQuery( '.locate-me' );
				locate.trigger( 'click' );
                var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(
                    parseFloat(coords[0]),
                    parseFloat(coords[1])
                ),
                info: new google.maps.InfoWindow({
                    content: val.title + val.distance
                })
          });
			}
			triggered = true;
		});
	</script>
<?php
}
add_action( 'wp_footer', 'listify_custom_autolocation', 9999 );

如果有人能带我出去，我将不胜感激。非常感谢。

您可以将这个用于定位函数：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };
        var marker = new google.maps.Marker({
            position: pos,
            map: map,
            title: 'Your position'
        });
        map.setCenter(pos);
    }, function() {
        //handle location error (i.e. if user disallowed location access manually)
    });
} else {
  // Browser doesn't support Geolocation
}

以下是后端的相关代码。我尝试添加@mxlse提供的代码，但似乎也不起作用。

  AutoLocateView.prototype.find = function() {
        var cv, error, filters, success;
        cv = this.collectionView;
        filters = this.filters;
        if (!navigator.geolocation) {
          return;
        }
        success = function(position) {
          var lat, lng;
          lat = position.coords.latitude;
          lng = position.coords.longitude;
          cv.set({
            'lat': lat,
            'lng': lng
          });
          return $('.locate-me').removeClass('loading');
        };
        error = function() {
          $('.locate-me').removeClass('loading');
          return filters.startup();
        };
        navigator.geolocation.getCurrentPosition(success, error);
        return this;
      };