顯示功能資訊Display feature information

空間資料通常是使用點、線條和多邊形來表示。Spatial data is often represented using points, lines, and polygons. 這種資料通常會有相關聯的中繼資料資訊。This data often has metadata information associated with it. 例如,某個點可能代表餐廳的地點,而該餐廳的中繼資料可能是其所提供的名稱、位址及食物類型。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. 此中繼資料可以新增為 GeoJSON 的屬性 FeatureThis metadata can be added as properties of a GeoJSON Feature. 下列程式碼會建立一個具有 title 值為 "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)

如需建立資料和將資料加入至地圖的方式,請參閱「 建立資料來源 」檔。See the Create a data source documentation for ways to create and add data to the map.

當使用者與地圖上的功能互動時,事件可以用來回應這些動作。When a user interacts with a feature on the map, events can be used to react to those actions. 常見的案例是顯示由使用者互動之功能的中繼資料屬性所組成的訊息。A common scenario is to display a message made of the metadata properties of a feature the user interacted with. OnFeatureClick事件是用來偵測使用者在地圖上點擊功能時所使用的主要事件。The OnFeatureClick event is the main event used to detect when the user tapped a feature on the map. 另外還有一個 OnLongFeatureClick 事件。There's also an OnLongFeatureClick event. 將事件新增 OnFeatureClick 至地圖時,可以藉由傳入圖層的識別碼加以限制,限制為單一層。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. 如果未傳入任何圖層識別碼,只要在地圖上按下任何功能,就會引發此事件。If no layer ID is passed in, tapping any feature on the map, regardless of which layer it is in, would fire this event. 下列程式碼會建立符號圖層,以在地圖上呈現點資料,然後加入 OnFeatureClick 事件,並將其限制為此符號圖層。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.

顯示快顯訊息Display a toast message

快顯訊息是向使用者顯示資訊最簡單的方式之一,在所有版本的 Android 中都有提供。A toast message is one of the easiest ways to display information to the user and is available in all versions of Android. 它不支援任何類型的使用者輸入,而且只會在短時間內顯示。It doesn't support any type of user input and is only displayed for a short period of time. 如果您想要快速讓使用者知道他們所說的內容,則快顯訊息可能是不錯的選擇。If you want to quickly let the user know something about what they tapped on, a toast message might be a good option. 下列程式碼說明如何搭配事件使用快顯訊息 OnFeatureClickThe 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.

正在點擊的功能和顯示的快顯訊息的動畫

除了快顯訊息之外,還有許多其他方式可呈現功能的中繼資料屬性,例如:In addition to toast messages, There are many other ways to present the metadata properties of a feature, such as:

  • Snackbar 小工具 - Snackbars提供有關操作的輕量意見反應。Snackbar widget - Snackbars provide lightweight feedback about an operation. 他們會在行動裝置上的畫面底部顯示簡短的訊息,並在較大的裝置上向下移動。They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars 會顯示在螢幕上的所有其他元素上方,一次只能顯示一個專案。Snackbars appear above all other elements on screen and only one can be displayed at a time.
  • 對話方塊-對話方塊 是一個小視窗,會提示使用者進行決策或輸入其他資訊。Dialogs - A dialog is a small window that prompts the user to make a decision or enter additional information. 對話方塊不會填滿畫面,通常用於需要使用者採取動作才能繼續的強制回應事件。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.
  • 片段 新增至目前的活動。Add a Fragment to the current activity.
  • 流覽至其他活動或視圖。Navigate to another activity or view.

顯示快顯視窗Display a popup

Azure 地圖服務 Android SDK 所提供的 Popup 類別,可讓您輕鬆地建立錨定至地圖上某個位置的 UI 注釋元素。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. 針對快顯,您必須將具有相對配置的視圖傳入 content 快顯視窗的選項。For popups, you have to pass in a view with a relative layout into the content option of the popup. 以下是在背景上顯示深色文字的簡單版面配置範例。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>

假設上述版面配置儲存在應用程式資料夾中的檔案中 popup_text.xml res -> layout ,則下列程式碼會建立快顯視窗,將它新增至對應。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. 當您按一下某項功能時, title 會使用版面配置 popup_text.xml 來顯示內容,並將配置的下中心錨定至地圖上指定的位置。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
})

下列螢幕擷取畫面顯示當按一下功能時顯示的快顯視窗,並在移動時保持錨定在地圖上的指定位置。The following screen capture shows popups appearing when features are clicked and staying anchored to their specified location on the map as it moves.

顯示快顯的動畫,並以快顯視窗錨定的地圖移至地圖上的位置

下一步Next steps

若要將更多資料新增至對應:To add more data to your map: