Visa funktionsinformationDisplay feature information

Spatialdata representeras ofta med punkter, linjer och polygoner.Spatial data is often represented using points, lines, and polygons. Informationen innehåller ofta information om metadata.This data often has metadata information associated with it. En punkt kan till exempel representera platsen för en restaurang och metadata om att restaurangens namn, adress och typ av livsmedel fungerar.For example, a point may represent the location of a restaurant and metadata about that restaurant may be its name, address, and type of food it serves. Du kan lägga till dessa metadata som egenskaper för en interjson Feature .This metadata can be added as properties of a GeoJSON Feature. Följande kod skapar en enkel punkt funktion med en title egenskap som har värdet "Hello World!"The following code creates a simple point feature with a title property that has a value of "Hello World!"

//Create a data source and add it to the map.
DataSource source = new DataSource();
map.sources.add(source);

//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(-122.33, 47.64));

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!");

//Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature);
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(-122.33, 47.64))

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!")

//Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature)

Se avsnittet skapa en data källa för att skapa och lägga till data till kartan.See the Create a data source documentation for ways to create and add data to the map.

När en användare interagerar med en funktion på kartan kan händelser användas för att reagera på dessa åtgärder.When a user interacts with a feature on the map, events can be used to react to those actions. Ett vanligt scenario är att visa ett meddelande om metadata-egenskaperna för en funktion som användaren interagerar med.A common scenario is to display a message made of the metadata properties of a feature the user interacted with. OnFeatureClickHändelsen är den huvudsakliga händelsen som används för att identifiera när användaren tryckte på en funktion på kartan.The OnFeatureClick event is the main event used to detect when the user tapped a feature on the map. Det finns också en OnLongFeatureClick händelse.There's also an OnLongFeatureClick event. När du lägger till OnFeatureClick händelsen i kartan kan den begränsas till ett enda lager genom att skicka i ID: t för ett lager för att begränsa det till.When adding the OnFeatureClick event to the map, it can be limited to a single layer by passing in the ID of a layer to limit it to. Om inget lager-ID skickas i, kan du trycka på en funktion på kartan, oavsett vilket lager det finns i, så att den här händelsen utlöses.If no layer ID is passed in, tapping any feature on the map, regardless of which layer it is in, would fire this event. Följande kod skapar ett symbol lager för att återge punkt data på kartan och lägger sedan till en OnFeatureClick händelse och begränsar den till det här symbol skiktet.The following code creates a symbol layer to render point data on the map, then adds an OnFeatureClick event and limits it to this symbol layer.

//Create a symbol and add it to the map.
SymbolLayer layer = new SymbolLayer(source);
map.layers.add(layer);

//Add a feature click event to the map.
map.events.add((OnFeatureClick) (features) -> {
    //Retrieve the title property of the feature as a string.
    String msg = features.get(0).getStringProperty("title");

    //Do something with the message.

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
}, layer.getId());    //Limit this event to the symbol layer.
//Create a symbol and add it to the map.
val layer = SymbolLayer(source)
map.layers.add(layer)

//Add a feature click event to the map.
map.events.add(OnFeatureClick { features: List<Feature> ->
    //Retrieve the title property of the feature as a string.
    val msg = features[0].getStringProperty("title")

    //Do something with the message.

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
}, layer.getId()) //Limit this event to the symbol layer.

Visa ett popup-meddelandeDisplay a toast message

Ett popup-meddelande är ett av de enklaste sätten att visa information till användaren och är tillgänglig i alla versioner av Android.A toast message is one of the easiest ways to display information to the user and is available in all versions of Android. Den har inte stöd för någon typ av användarindata och visas bara under en kort tids period.It doesn't support any type of user input and is only displayed for a short period of time. Om du snabbt vill låta användaren veta vad de tryckte på, kan ett popup-meddelande vara ett bra alternativ.If you want to quickly let the user know something about what they tapped on, a toast message might be a good option. Följande kod visar hur ett popup-meddelande kan användas med OnFeatureClick händelsen.The following code shows how a toast message can be used with the OnFeatureClick event.

//Add a feature click event to the map.
map.events.add((OnFeatureClick) (features) -> {
    //Retrieve the title property of the feature as a string.
    String msg = features.get(0).getStringProperty("title");

    //Display a toast message with the title information.
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
}, layer.getId());    //Limit this event to the symbol layer.
//Add a feature click event to the map.
map.events.add(OnFeatureClick { features: List<Feature> ->
    //Retrieve the title property of the feature as a string.
    val msg = features[0].getStringProperty("title")

    //Display a toast message with the title information.
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show()

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
}, layer.getId()) //Limit this event to the symbol layer.

Animering av en funktion som knackas och ett popup-meddelande visas

Förutom popup-meddelanden finns det många andra sätt att presentera egenskaperna för metadata för en funktion, till exempel:In addition to toast messages, There are many other ways to present the metadata properties of a feature, such as:

  • Snackbar-widget - Snackbars ge lätt feedback om en åtgärd.Snackbar widget - Snackbars provide lightweight feedback about an operation. De visar ett kort meddelande längst ned på skärmen på mobilt och lägre till större enheter.They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars visas ovanför alla andra element på skärmen och bara en kan visas i taget.Snackbars appear above all other elements on screen and only one can be displayed at a time.
  • Dialog rutor – en dialog ruta är ett litet fönster som efterfrågar användaren att fatta ett beslut eller ange ytterligare information.Dialogs - A dialog is a small window that prompts the user to make a decision or enter additional information. En dialog ruta fyller inte på skärmen och används vanligt vis för modala händelser som kräver att användarna vidtar en åtgärd innan de kan fortsätta.A dialog doesn't fill the screen and is normally used for modal events that require users to take an action before they can continue.
  • Lägg till ett fragment i den aktuella aktiviteten.Add a Fragment to the current activity.
  • Navigera till en annan aktivitet eller vy.Navigate to another activity or view.

Visa ett popup-fönsterDisplay a popup

Azure Maps Android SDK är en Popup klass som gör det enkelt att skapa gränssnitts antecknings element som är förankrade till en placering på kartan.The Azure Maps Android SDK provides a Popup class that makes it easy to create UI annotation elements that are anchored to a position on the map. För popup-fönster måste du skicka i en vy med en relativ layout till content alternativet i popup-fönstret.For popups, you have to pass in a view with a relative layout into the content option of the popup. Här är ett enkelt exempel på en layout som visar mörk text ovanpå en medan bakgrunden.Here is a simple layout example that displays dark text on top of a while background.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_margin="8dp"
    android:padding="10dp"

    android:layout_height="match_parent">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:text=""
        android:textSize="18dp"
        android:textColor="#222"
        android:layout_height="wrap_content"
        android:width="200dp"/>

</RelativeLayout>

Om du antar att ovanstående layout är lagrad i en fil som kallas popup_text.xml i res -> layout mappen för en app, skapar följande kod en popup-meny, lägger till den i kartan.Assuming the above layout is stored in a file called popup_text.xml in the res -> layout folder of an app, the following code creates a popup, adds it to the map. När användaren klickar på en funktion title visas egenskapen med hjälp av popup_text.xml layouten och längst ned i mitten av layouten till den angivna placeringen på kartan.When a feature is clicked, the title property is displayed using the popup_text.xml layout, with the bottom center of the layout anchored to the specified position on the map.

//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

map.events.add((OnFeatureClick)(feature) -> {
    //Get the first feature and it's properties.
    Feature f = feature.get(0);
    JsonObject props = f.properties();

    //Retrieve the custom layout for the popup.
    View customView = LayoutInflater.from(this).inflate(R.layout.popup_text, null);

    //Access the text view within the custom view and set the text to the title property of the feature.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText(props.get("title").getAsString());

    //Get the coordinates from the clicked feature and create a position object.
    List<Double> c = ((Point)(f.geometry())).coordinates();
    Position pos = new Position(c.get(0), c.get(1));

    //Set the options on the popup.
    popup.setOptions(
        //Set the popups position.
        position(pos),

        //Set the anchor point of the popup content.
        anchor(AnchorType.BOTTOM),

        //Set the content of the popup.
        content(customView)

        //Optionally, hide the close button of the popup.
        //, closeButton(false)
    );

    //Open the popup.
    popup.open();

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
});
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

map.events.add(OnFeatureClick { feature: List<Feature> ->
    //Get the first feature and it's properties.
    val f = feature[0]
    val props = f.properties()

    //Retrieve the custom layout for the popup.
    val customView: View = LayoutInflater.from(this).inflate(R.layout.popup_text, null)

    //Access the text view within the custom view and set the text to the title property of the feature.
    val tv: TextView = customView.findViewById(R.id.message)
    tv.text = props!!["title"].asString

    //Get the coordinates from the clicked feature and create a position object.
    val c: List<Double> = (f.geometry() as Point?).coordinates()
    val pos = Position(c[0], c[1])

    //Set the options on the popup.
    popup.setOptions( 
        //Set the popups position.
        position(pos),  

        //Set the anchor point of the popup content.
        anchor(AnchorType.BOTTOM),  

        //Set the content of the popup.
        content(customView) 

        //Optionally, hide the close button of the popup.
        //, closeButton(false)
    )

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
})

I följande skärm bild visas popup-fönster som visas när du klickar på funktioner och som ligger kvar på den angivna platsen på kartan när den flyttas.The following screen capture shows popups appearing when features are clicked and staying anchored to their specified location on the map as it moves.

Animering av en popup som visas och kartan har flyttats med ett popup-fönster till en position på kartan

Nästa stegNext steps

Lägga till mer data i kartan:To add more data to your map: