Skip to main content

Ghid de implementare a hărții de context local

By September 26, 2020September 28th, 2020Google Maps

Cea mai recentă versiune beta de la Google a adus multe funcții noi.  Am vorbit deja despre noile instrumente pentru personalizarea hărților și astăzi vă prezentăm Local Context Map. Este un widget care prezintă anumite tipuri de locații alese de utilizator în apropierea unei anumite locații.

Local Context Map are un panou lateral interactiv care include imagini ale locurilor căutate. După ce faceți clic pe fotografia aleasă, biblioteca contextuală locală va afișa informații detaliate despre locație, inclusiv evaluările utilizatorilor, comentarii și alte date utile. În plus, puteți vizualiza timpul estimat de conducere sau mers pe jos până la destinație.

Cum puteți implementa widgetul Local Context Map?

Iată o instrucțiune pas cu pas:

1. Când încărcați API JavaScript Maps, adăugați biblioteca corectă și setați versiunea API (Local Context Map este disponibilă în prezent pentru versiunea beta)

<script src="https://maps.googleapis.com/maps/api/js?libraries=localContext&v=beta&key=API_KEY&callback=initMap" 
        defer> 
</script>

2. Creați obiectul LocalContextMapView cu următorii parametri:

  • Element pentru care doriți să obțineți LocalContextMapView
  • placeTypePreferences – maximum 10 tipuri de locuri căutate. Puteți găsi lista tipurilor acceptate aici:
  • maxPlaceCount – numărul locurilor de afișat pe hartă. Are o valoare în intervalul <0; 24>. 0 înseamnă că biblioteca de context local nu încarcă niciun loc pe hartă.
  • directionsOptions – parametru opțional pentru definirea punctului de origine. După alegerea unui loc în GUI și setarea acestui parametru, veți obține o rută și ora estimată de sosire.
var places = ['restaurant', 'cafe', 'tourist_attraction']; 
var center = { 
   lat: 52.175968, 
   lng: 21.019255 
}; 
 
var localContextMapView = new google.maps.localContext.LocalContextMapView({ 
   element: document.querySelector('#map'), 
   placeTypePreferences: places, 
   maxPlaceCount: 24, 
   directionsOptions: {origin: center}, 
});

3. Apoi, definiți o hartă.

var map = localContextMapView.map; 
 
map.setOptions({ 
   center: center, 
   zoom: 15 
}); 
 
map.addListener('click', () => { 
   localContextMapView.hidePlaceDetailsView(); 
}); 
 
var marker = new google.maps.Marker({position: center, map: map});

Vizualizarea hărții este setată cu primul apel când sunt definite centrul și mărirea hărții.

Exemplul prezentat include un eveniment care ascunde detalii despre loc când faceți clic pe orice loc de pe hartă.

4. În plus, puteți seta locația dvs. aproximativă ca punct central al hărții contextuale locale utilizând funcțiile de geolocalizare HTML5 ale browserului. Când utilizatorul reîmprospătează pagina, va trebui să confirme că este de acord să-și partajeze locația curentă. După aceasta, tipurile de locuri alese în apropierea lor vor apărea pe hartă.

Trebuie să vă modificați codul pentru a adăuga geolocalizarea:

function initMap() { 
  var center = { 
    lat: 52.175968, 
    lng: 21.019255 
  }; 
 
  if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition( 
        position => { 
          geolocationPosition = { 
            lat: position.coords.latitude, 
            lng: position.coords.longitude 
          }; 
          createContextMap(geolocationPosition); 
        },() => { 
          createContextMap(center); 
        } 
    ); 
  } else { 
    window.alert("The Geolocation service failed, used default center"); 
    createContextMap(center); 
  } 
};

Dacă browserul dvs. se luptă cu definirea locației, veți primi un mesaj de eroare și pagina va încărca locația implicită. Crearea hărții contextuale locale este o funcție diferită:

function createContextMap(center) { 
  var places = ['restaurant', 'cafe', 'tourist_attraction']; 
  var localContextMapView = new google.maps.localContext.LocalContextMapView({ 
    element: document.querySelector('#map'), 
    placeTypePreferences: places, 
    maxPlaceCount: 24, 
    directionsOptions: {origin: center}, 
  }); 
 
  var map = localContextMapView.map; 
  localContextMapView.map.setOptions({ 
    center: center, 
    zoom: 15 
  }); 
 
  map.addListener('click', () => { 
    localContextMapView.hidePlaceDetailsView(); 
  }); 
 
  var marker = new google.maps.Marker({position: center, map: map}); 
}

În cele din urmă, veți obține locația dvs. aproximativă:

Aveți întrebări sau probleme? Doriți să vedeți cum Google Maps vă poate îmbunătăți afacerea? Experții noștri vor furniza toate informațiile!

Tags: