Google Maps anzeigen Titelmarkierung, wenn es auf der Karte erscheint

Question

Question1

So habe ich eine Karte mit Markierungen und Benutzer Lage, Markierungen auf der Karte sind, aber was ich tun möchte, ist, wenn der Benutzer bewegt, und eine Markierung erscheint Auf seinem Weg pop-up es ist Titel, so dass es sichtbar ist, ohne zu klicken, und es verschwinden lassen, wenn Markierung nicht länger sichtbar ist.

Wie kann das gemacht werden?

Question2:

Wie kann ich über Titel anzuzeigen, Entfernung zu diesem Marker von Benutzer-Standort?

Hier ist mein Code:

$(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(); 

}); 

Answer 1

1. hier müssen Sie unterwegs auf der Karte hören und den Begrenzungsrahmen später aktualisieren:

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

Mehr Infos auf die auf algolia doc: https://www.algolia.com/doc/guides/geo-search/geo-search-overview/#filter-inside-an-area

2. Algolia bieten nicht den Abstand zum Zentrum benötigt daher wie in diesem Stack-Überlauf Antwort erklärt werden berechnet: https://stackoverflow.com/a/27943/654253