In diesem Abschnitt werden die Optionen beschrieben, die Sie für eine LocalContextMapView
-Instanz sowie das innere Map
-Objekt in LocalContextMapView
festlegen können. Wenn Sie eine neue LocalContextMapView
-Instanz erstellen, geben Sie bis zu 10 Ortstypen sowie die maximale Anzahl der Orte an, die zurückgegeben werden sollen (bis zu 24). Das innere Map
-Objekt unterstützt dieselben MapOptions wie ein standardmäßiges Map
-Objekt der Maps JavaScript API.
Sie können die Eigenschaften für die lokale Kontextsuche jederzeit nach der Initialisierung der lokalen Kontextbibliothek aktualisieren. Wenn Sie maxPlaceCount
, placeTypePreferences
, locationRestriction
oder locationBias
aktualisieren, wird möglicherweise automatisch eine neue Suche ausgelöst.
Ortstypen angeben
Sie können bis zu 10 Ortstypen angeben, die von der lokalen Kontextbibliothek zurückgegeben werden sollen. Dazu verwenden Sie die Eigenschaft placeTypePreferences
und übergeben mindestens einen Ortstyp, wie im folgenden Beispiel gezeigt:
placeTypePreferences: ['restaurant', 'cafe']
Gewichtung von Ortstypen
Sie können jedem angegebenen Typ eine relative Gewichtung zuweisen. Typen mit einer höheren Gewichtung werden dann häufiger angezeigt. Die Gewichtung ist ein optionaler, erweiterter Parameter, der nur bei Bedarf verwendet werden sollte. Wenn er weggelassen wird, ermittelt die lokale Kontextbibliothek die Standardgewichtungen, die sich mit der Zeit ändern und verbessern können.
Mit dem Attribut weight
können Sie jeder Eigenschaft eine relative Gewichtung zuweisen. Im folgenden Beispiel sehen Sie, wie Ortstypen so gewichtet werden, dass sie doppelt so viele Ergebnisse für restaurant
und cafe
wie für primary_school
zurückgeben:
placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]
Die Ergebnisse hängen davon ab, ob der jeweilige Ortstyp in einem bestimmten Gebiet vorhanden ist. Wenn Sie shopping_mall
beispielsweise eine Gewichtung von 10 zuweisen, hat dies keine Auswirkungen, wenn es in der Gegend keine Einkaufszentren gibt.
Maximale Anzahl von Orten festlegen
So verwenden Sie die Eigenschaft maxPlaceCount
, um die maximale Anzahl von Orten (bis zu 24) festzulegen, die die lokale Kontextbibliothek zurückgeben soll:
maxPlaceCount: 12
Standortbeschränkung festlegen
Suchvorgänge sind standardmäßig an den Darstellungsbereich der Karte gebunden. Sie können Grenzen festlegen, um Suchergebnisse auf einen größeren oder kleineren Bereich zu beschränken. Dazu setzen Sie die Eigenschaft locationRestriction
der LocalContextMapView
auf den gewünschten LatLngBounds
-Wert. Der Wert kann größer oder kleiner als der Darstellungsbereich der Karte sein.
Beispiel ansehen
Routenplaner aktivieren
Um den Routenplaner auf Ihrer Karte zu aktivieren, legen Sie die Eigenschaft directionsOptions
von LocalContextMapView
fest und übergeben ein LatLng-Objektliteral für den Startpunkt. Der Endpunkt wird durch den aktuell ausgewählten Ort definiert. Wenn kein Startpunkt übergeben wird, wird der Routenplaner deaktiviert. Das folgende Beispiel zeigt, wie Sie einen Startpunkt zum Aktivieren von Fußgängerrouten auf einer Karte festlegen:
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},
Die Größe des Darstellungsbereichs der Karte, der durch die Kartengrenzen und die Zoomstufe definiert wird, wirkt sich direkt auf die Entfernungen aus, die von einem bestimmten Startpunkt zurückgegeben werden können. Wenn für den Darstellungsbereich beispielsweise eine Breite von 160 Kilometern festgelegt ist, können POIs in einem Umkreis von bis zu 80 Kilometern um den Startpunkt herum angezeigt werden. So sorgen Sie dafür, dass Ihre Anwendung Fußgängerrouten mit angemessenen Entfernungen zurückgibt:
- Deaktivieren Sie Fußgängerrouten bei niedrigeren Zoomstufen, normalerweise unter der Zoomstufe 16.
- Definieren Sie eine
locationRestriction
mit einem kleineren Bereich. Dadurch wird verhindert, dass POIs außerhalb des eingeschränkten Bereichs angezeigt werden.
Startpunkt der Route ändern
Sie können den Wert der Eigenschaft directionsOptions
während des Lebenszyklus von LocalContextMapView
jederzeit ändern. Im folgenden Beispiel wird ein neuer Wert für directionsOptions
festgelegt:
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
oder
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
Layout und Sichtbarkeit festlegen
Um die anfänglichen Optionen für Layoutposition und Sichtbarkeit für die Ansicht mit den Ortsdetails und die Ortsauswahl festzulegen, legen Sie die Eigenschaften placeChooserViewSetup
und placeDetailsViewSetup
von LocalContextMapView
fest. Die Ansicht mit den Ortsdetails lässt sich auch programmatisch ausblenden.
Layoutposition der Ortsauswahl festlegen
Sie können die Layoutposition der Ortsauswahl festlegen, wenn Sie LocalContextMapView
initialisieren. Die Layoutposition richtet sich nach der Leserichtung und hängt davon ab, ob es sich um eine Links-nach-rechts- (left-to-right, LTR) oder Rechts-nach-links-Anwendung (right-to-left, RTL) handelt.
Für die Ortsauswahl gibt es drei Layoutoptionen:
- Bei
INLINE_START
wird die Ortsauswahl am Anfang des Inhaltsflusses angezeigt (links auf der Karte für LTR, rechts für RTL). - Bei
INLINE_END
wird die Ortsauswahl am Ende des Inhaltsflusses angezeigt (rechts auf der Karte für LTR, links für RTL). - Bei
BLOCK_END
wird die Ortsauswahl sowohl für LTR als auch für RTL unten auf der Seite angezeigt.
Wenn Sie die Position der Ortsauswahl auf INLINE_START
oder INLINE_END
festlegen, müssen Sie das auch für die Position der Ansicht mit den Ortsdetails tun.
Sie können optional angeben, dass die Ansicht mit den Ortsdetails in einem Infofenster angezeigt werden soll.
Bei BLOCK_END
muss der Layoutmodus für die Ansicht mit den Ortsdetails immer auf INFO_WINDOW
festgelegt sein.
Die lokale Kontextbibliothek passt die Position der Ortsauswahl dynamisch an die gerenderte Größe von LocalContextMapView
an. In einer größeren LocalContextMapView
wird die Ortsauswahl standardmäßig am Anfang des Inhaltsflusses angezeigt (links für LTR, rechts für RTL). In einer kleineren LocalContextMapView
, z. B. auf einem Mobilgerät, wird die Ortsauswahl unten auf der Karte angezeigt und die Ortsdetails werden in einem Infofenster angezeigt. Die Zoomstufe des Browsers wirkt sich auf die Pixelabmessungen aus, bei denen die Ortsauswahl von der Seite nach unten und umgekehrt verschoben wird (der Schwellenwert erhöht sich proportional zur Zoomstufe).
Wir empfehlen, Funktionsaufrufe zu verwenden, um die Standardposition der Ortsauswahl zu konfigurieren. Wenn Sie diese Werte direkt angeben, werden alle responsiven Layoutänderungen überschrieben.
Ortsauswahl zu Beginn des Inhaltsflusses
Wenn die Ortsauswahl zu Beginn des Inhaltsflusses angezeigt werden soll (links auf der Karte für LTR, rechts für RTL), müssen Sie für placeChooserViewSetup
und placeDetailsViewSetup
die Option INLINE_START
als position
festlegen, wie hier gezeigt:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
});
Ortsauswahl am Ende des Inhaltsflusses
Wenn die Ortsauswahl am Ende des Inhaltsflusses angezeigt werden soll (rechts für LTR, links für RTL), müssen Sie für placeChooserViewSetup
und placeDetailsViewSetup
die Option INLINE_END
als position
festlegen, wie hier gezeigt:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
});
Ortsauswahl unten
Wenn die Ortsauswahl unten auf der Karte angezeigt werden soll, müssen Sie für placeChooserViewSetup
die Option BLOCK_END
als position
festlegen. Für den layoutMode
von placeDetailsViewSetup
muss INFO_WINDOW
angegeben werden. Hier ein Beispiel:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'BLOCK_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {layoutMode: 'INFO_WINDOW'};
}
},
});
Ortsauswahl ausblenden
Die Ortsauswahl ist standardmäßig sichtbar. Wenn Sie sie ausblenden möchten, geben Sie für layoutMode
den Wert HIDDEN
an, wie im folgenden Beispiel gezeigt:
placeChooserViewSetup: {layoutMode: 'HIDDEN'},
Das folgende Beispiel zeigt, wie die Ortsauswahl ausgeblendet wird, wenn sich die Standardposition zu BLOCK_END
ändert:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
placeChooserViewSetup: ({defaultPosition}) => {
if (defaultPosition === 'BLOCK_END') {
return {layoutMode: 'HIDDEN'};
}
},
});
Ansicht mit den Ortsdetails in einem Infofenster
Damit die Ansicht mit den Ortsdetails in einem Infofenster angezeigt wird, setzen Sie layoutMode
auf INFO_WINDOW
, wie im folgenden Beispiel gezeigt:
placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},
Bei dieser Einstellung kann die Position der Ortsauswahl beliebig festgelegt werden (links, rechts oder unten).
Ansicht mit den Ortsdetails programmatisch ausblenden
Sie können die Ansicht mit den Ortsdetails programmatisch ausblenden, indem Sie hidePlaceDetailsView()
für eine LocalContextMapView
-Instanz aufrufen, wie im folgenden Beispiel gezeigt:
localContextMapView.hidePlaceDetailsView()
Wenn auf die Karte geklickt wird, wird die Ansicht mit den Ortsdetails standardmäßig ausgeblendet. Sie können die Option hidesOnMapClick
in placeDetailsViewSetup
auf false
setzen, um dieses Standardverhalten zu verhindern.
// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: {hidesOnMapClick: false},
});
Wenn das Infofenster für Ortsdetails nur beim Klicken auf die Karte ausgeblendet werden soll, können Sie den hidesOnMapClick
-Wert mit Bedingungsanweisungen steuern, wie im folgenden Beispiel gezeigt:
// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: ({defaultLayoutMode}) => {
return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
},
});
Optionen für das innere Map
-Objekt festlegen
Sobald Sie eine LocalContextMapView
-Instanz haben, können Sie MapOptions für die innere Map
-Instanz angeben. Die Map
in einer LocalContextMapView
unterstützt dieselben Kartenoptionen wie eine standardmäßige Maps JavaScript API-Karte. Das folgende Beispiel zeigt, wie Sie eine neue LocalContextMapView
-Instanz erstellen und einige Optionen für die innere Map
-Instanz angeben:
// Instantiate LocalContextMapView.
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: pos,
zoom: 14,
mapTypeId: 'satellite',
});
}