Question

您好我正在使用谷歌地图和algolia，我有一个索引＆＃39; locations＆＃39;与＆＃39; lat＆＃39;和＆＃39; lng＆＃39;。

我正在获取用户位置和观看位置，我也在显示基于lng和lat的数据库中的标记但是我想为它添加一点：

所以我已经关注了这个链接：

https://www.algolia.com/doc/guides/geo-search/geo-search-overview/

并提出：

 @extends('master') @section('title', 'Live Oldham')
@section('extrafiles')

<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq50&language=en"></script>
<script type="text/javascript" src="{!! asset('js/homesearch.js') !!}"></script>
@endsection
@section('content')
        <div id="map_canvas" style="height:600px;"></div>
@endsection

和js：

$(document).ready(function() {
var map;
function initializeMap(){
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 19,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
function locError(error) {
// the current position could not be located
    alert("The current position could not be found!");
}
function setCurrentPosition(position) {
    currentPositionMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
        ),
        title: "Current Position"
    });
    map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));
}
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log(latitude);
console.log(longitude);
function displayAndWatch(position) {
    // set current position
    setCurrentPosition(position);
    // watch position
    watchCurrentPosition(position);
    console.log(position);
}
function watchCurrentPosition(position) {
    var positionTimer = navigator.geolocation.watchPosition(
        function (position) {
            setMarkerPosition(
            currentPositionMarker,
            position,
        )
    });
}
function setMarkerPosition(marker, position) {
    marker.setPosition(
        new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude)
    );
}
function initLocationProcedure() {
    initializeMap();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
        }else{
            alert("Your browser does not support the Geolocation API");
    }
}

$(document).ready(function() {
    initLocationProcedure();
});
var APPLICATION_ID = '75RQSC1OHE';
var SEARCH_ONLY_API_KEY = 'f2f1e9bba4d7390fc61523a04685cf12';
var INDEX_NAME = 'locations';
var PARAMS = { hitsPerPage: 100 };
// Client + Helper initialization
var algolia = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
var algoliaHelper = algoliasearchHelper(algolia, INDEX_NAME, PARAMS);

// Map initialization
var markers = [];
//alert("heelo");
var fitMapToMarkersAutomatically = true;
algoliaHelper.on('result', function(content) {
    renderHits(content);
  var i;
  // Add the markers to the map
  for (i = 0; i < content.hits.length; ++i) {
    var hit = content.hits[i];
    console.log(hit)
    var marker = new google.maps.Marker({
      position: {lat: hit.longitude, lng: hit.latitude},
      map: map,
      title: hit.slug
    });


    markers.push(marker);
  }
  // Automatically fit the map zoom and position to see the markers
  if (fitMapToMarkersAutomatically) {
    var mapBounds = new google.maps.LatLngBounds();
    for (i = 0; i < markers.length; i++) {
      mapBounds.extend(markers[i].getPosition());
    }
    map.fitBounds(mapBounds);
  }

});
function renderHits(content) {
  $('#container').html(JSON.stringify(content, null, 2));
}
algoliaHelper.setQueryParameter('aroundRadius', 5000).search(); // 5km Radius

});

然而，这方面的问题很少，我不知道如何解决：

当用户移动时，它不会将地图置于标记上。
此时标记在用户移动时在位置之间跳跃，我希望标记在用户移动时在地图上动态移动。
我想使用algolia动态设置标记，所以我想显示距用户位置5公里半径的标记，并动态添加或删除标记之外的标记。

Answer 1

我无法帮助你解决这些问题，因为它主要是关于如何使用GMap JS lib而我没有经验。然而，其他东西吸引了我的眼睛：

var marker = new google.maps.Marker({
      position: {lat: hit.longitude, lng: hit.latitude},
      map: map,
      title: hit.slug
    });

您应该将坐标放在_geoloc字段中，以便能够使用地理搜索功能。它看起来像这样：

_geoloc: {
      lat: 40.639751,
      lng: -73.778925
    }

Algolia和谷歌过滤结果基于用户位置

1 个答案: