Javascript 当标记出现在地图上时，谷歌地图会显示标记标题

问题1

所以我有一个带有标记和用户位置的地图，标记在地图上，但我想做的是当用户移动时，一个标记出现在他的路上，弹出它的标题，这样它就可以在不点击的情况下看到，当标记不再可见时，它就会消失

如何做到这一点

问题2：

我如何显示标题，从用户位置到该标记的距离

这是我的密码：

$(document).ready(function() {
var map;
var circle;
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };
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) {
    var accuracy = position.coords.accuracy;
    currentPositionMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
        ),
        title: "Current Position",
        center: position,
        icon: iconBase + 'parking_lot_maps.png',
        animation: google.maps.Animation.DROP
    });
    map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));
        circle = new google.maps.Circle({
        map: map,
  radius: accuracy,    // 10 miles in metres
  fillColor: '#255ebas'
});

circle.bindTo('center', currentPositionMarker, 'position')
}

function displayAndWatch(position) {
    // set current position
    setCurrentPosition(position);
    // watch position
    watchCurrentPosition(position);
}
function watchCurrentPosition(position) {
    var positionTimer = navigator.geolocation.watchPosition(
        function (position) {
            setMarkerPosition(
            currentPositionMarker,
            position,
        )
    });
}
function setMarkerPosition(marker, position) {
    circle.setRadius(position.coords.accuracy);
    marker.setPosition(
        new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude)
    );
        map.panTo(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");
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];
    var marker = new google.maps.Marker({
      position: {lat: hit.longitude, lng: hit.latitude},
      map: map,
      title: hit.slug,
      animation: google.maps.Animation.DROP
    });

    markers.push(marker);
  }

});
function renderHits(content) {
  $('#container').html(JSON.stringify(content, null, 2));
}
algoliaHelper.search();

});

$（文档）.ready（函数（）{
var映射；
var圈；
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
变量图标={
停车场：{
图标：iconBase+“parking\u lot\u maps.png”
},
图书馆：{
图标：iconBase+“library_maps.png”
},
信息：{
图标：iconBase+“info-i_maps.png”
}
};
函数初始化映射（）{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：19，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
}
函数locError（错误）{
//找不到当前位置
警报（“找不到当前位置！”）；
}
功能设置当前位置（位置）{
var精度=位置坐标精度；
currentPositionMarker=新的google.maps.Marker({
地图：地图，
职位：新google.maps.LatLng(
位置坐标纬度，
位置坐标经度
),
标题：“当前职位”，
中锋:位置,，
图标：iconBase+“parking\u lot\u maps.png”，
动画：google.maps.animation.DROP
});
map.panTo（新的google.maps.LatLng）(
位置坐标纬度，
位置坐标经度
));
圆圈=新的google.maps.circle({
地图：地图，
半径：精度，//10英里（米）
填充颜色：“#255ebas”
});
circle.bindTo（'center'，currentPositionMarker'，position'）
}
功能显示和观察（位置）{
//设置当前位置
设置当前位置（位置）；
//监视位置
手表当前位置（位置）；
}
功能监视当前位置（位置）{
var positionTimer=navigator.geolocation.watchPosition(
职能（职位）{
设置标记位置(
当前位置标记，
立场,，
)
});
}
功能设置标记位置（标记，位置）{
圆.设定半径（位置.坐标.精度）；
标记设置位置(
新google.maps.LatLng(
位置坐标纬度，
位置坐标经度）
);
map.panTo（新的google.maps.LatLng）(
位置坐标纬度，
位置坐标经度
));
}
函数initLocationProcedure（）{
初始化映射（）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（displayAndWatch，locError）；
}否则{
警报（“您的浏览器不支持地理位置API”）；
}
}
$（文档）.ready（函数（）{
initLocationProcedure（）；
});
var应用程序_ID='75RQSC1OHE'；
var搜索仅适用于API键='f2f1e9bba4d7390fc61523a04685cf12'；
var索引_名称='位置'；
var PARAMS={hitsPerPage:100}；
//客户端+助手初始化
var algolia=algoliasearch（应用程序ID、仅搜索API密钥）；
var algoliaHelper=algoliasearchHelper（algolia，索引名称，参数）；
//地图初始化
var标记=[]；
//警惕（“heelo”）；
algoliaHelper.on（'result'，函数（content）{
报告（内容）；
var i；
//将标记添加到地图中
对于（i=0；i

在这里，您需要聆听地图上的移动，然后更新边界框：

map.addListener('bounds_changed', function() {
  var bounds = map.getBounds();
  algoliaHelper.setQueryParameter("insideBoundingBox", bounds.toUrlValue()).search();
});

关于algolia doc的更多信息：

Algolia不提供到中心的距离，因此需要按照堆栈溢出答案中的说明计算：

---

嗨，我怎样才能在移动中收听并运行搜索呢？比如说，我想看到半径为200米的所有东西。此外，我的algolia geo搜索不起作用，因为它不在_geo变量中，它必须在其中吗？包含记录位置的数据必须在_geoloc属性中。我建议您阅读本指南，该指南非常详尽地介绍了该主题：