web-dev-qa-db-ja.com

Googleマップのテキストを使用したマップマーカーAndroid API v2

私はこの投稿を思いつきましたが、それは非推奨のGoogle Maps API向けです

http://tech.truliablog.com/2012/02/23/custom-map-markers-for-Android-google-maps/

新しいAPIでは、これを行う簡単な方法を見つけることができませんでした。実際、全然できませんでした。

基本的に、テキストの背景として9Patchドローアブルを使用して、TextViewをマーカーとしてマップに配置したいと考えています。 Truliaは、現在のアプリで新しいAPI v2を使用してまだそれを行っています。ここで確認できます

Trulia current app

これどうやってするの？

androidgoogle-mapsgoogle-maps-markersgoogle-maps-android-api-2
16
tasomaniac

Chris Broadfoot は、まさにそれを行うユーティリティライブラリを作成しました。

ライブラリはここから入手できます： https://github.com/googlemaps/Android-maps-utils

この短い動画もご覧ください： http://www.youtube.com/watch?v=nb2X9IjjZpM

38
MaciejGórski

これは、グーグルが提供するこの便利なライブラリを使用して簡単に実現できます。

IconGenerator icg = new IconGenerator(this);
icg.setColor(Color.GREEN); // green background 
icg.setTextAppearance(R.style.BlackText); // black text 
Bitmap bm = icg.makeIcon("200 mi");

Style.xml内

<style name="BlackText" parent="TextDefault">
    <item name="Android:textColor">@color/black</item>
</style>

http://googlemaps.github.io/Android-maps-utils/javadoc/

http://googlemaps.github.io/Android-maps-utils/

https://github.com/googlemaps/Android-maps-utils

this linkからプロジェクトの上部リンクを設定できます

12
Justcurious

私の知る限り、これは現在google maps api v2ではサポートされていません。一方、できることは、マーカーのビットマップを動的に作成し、そこに表示する値を書き込むことです。悲しいかな、たまたまピンがたくさんあると、パフォーマンスの問題が発生しやすくなります。

Canvas canvas = new Canvas(bitmap);
canvas.drawText("Your text", textXOffset, textYOffset, mPictoPaint);
MarkerOptions options = new MarkerOptions().position([…]).icon(BitmapDescriptorFactory.fromBitmap(bitmapResult));
Marker newMarker = map.addMarker(options);

bitmapは変更可能である必要があることに注意してください。また、必要に応じて（おそらく9.patchを使用して）ベースイメージをスケーリングする必要があります。

6
Nerkatel

Googleのサンプルコード を参照して

IconGenerator iconFactory = new IconGenerator(this);    
        iconFactory.setColor(Color.CYAN);
        addIcon(mMap, iconFactory, "Custom color", new LatLng(-33.9360, 151.2070));

addIcon（）メソッドはこちら：

private void addIcon(GoogleMap googleMap, IconGenerator iconFactory, CharSequence text, LatLng position) {
        MarkerOptions markerOptions = new MarkerOptions().
                icon(BitmapDescriptorFactory.fromBitmap(iconFactory.makeIcon(text))).
                position(position).
                anchor(iconFactory.getAnchorU(), iconFactory.getAnchorV());

        googleMap.addMarker(markerOptions);
    }
1
AbhinayMe

私はこの質問が古いことを知っていますが、誰かを助けるためにここに私の回答を投稿します。

上記の解決策のどれも私のために働いていませんでした

  • アプリにマーカーのカスタムアイコンがすでにあります

  • 私のアプリは潜在的に数千の異なるマーカータイトルを表示するため、メモリ内に多くの画像を作成するとパフォーマンスの問題になります

  • マーカーアイコンが大きくなると、マップはすぐに判読できなくなります

  • タイトルにスペースがある場合にのみ表示し、表示するスペースがない場合は非表示にすることを希望しました

私はインターネットで解決策を見つけられなかったので、私は私の袖をまくり上げて、私の問題を解決するこのライブラリを作成しました、うまくいけばそれは他の人にも役立つでしょう：

https://github.com/androidseb/Android-google-maps-floating-marker-titles

これがどのように機能するかのプレビューです：

preview

1
androidseb

Clustersを使用すると、動作が少し異なります。

https://medium.com/@yilmazvolkan/custom-map-marker-8b136212d766 を見て、ここに書いた。

styles.xml：

<!-- Google Maps marker -->
<style name="MarkerText">
    <item name="Android:textSize">12sp</item>
    <item name="Android:textColor">#f0f0f0</item>
</style>

marker_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"
    >

    <solid Android:color="#3232a0" />
    <corners Android:radius="18dp" />
</shape>

断片：

private var clusterManager: ClusterManager<SomeClusterItem>? = null
private var clusterRenderer: MarkerClusterRenderer<SomeClusterItem>? = null
private var unselectedBitmap: BitmapDescriptor? = null
private var iconGenerator: IconGenerator? = null
private var selectedItem: SomeClusterItem? = null

override fun onMapReady(googleMap: GoogleMap) {
    this.googleMap = googleMap
    ...

    unselectedBitmap =
        BitmapUtils.bitmapDescriptorFromVector(context!!, R.drawable.unselected_item)

    // Create a text marker background.
    iconGenerator = IconGenerator(context!!)
    iconGenerator!!.setTextAppearance(R.style.MarkerText)
    val markerBackground = ContextCompat.getDrawable(context!!, R.drawable.marker_bg)
    iconGenerator!!.setBackground(markerBackground)

    clusterManager = ClusterManager(context!!, googleMap)
    clusterRenderer = MarkerClusterRenderer(context!!, googleMap, clusterManager!!,
        unselectedBitmap!!)
    clusterManager!!.renderer = clusterRenderer

    ...
    // Create a list of markers.
    val boundsBuilder = LatLngBounds.Builder()
    ...

    // Show clusters and markers.
    clusterManager!!.cluster()

    clusterManager!!.setOnClusterItemClickListener { item ->
        // Deselect selected marker.
        // See https://stackoverflow.com/a/53829888/2914140.
        if (selectedItem != null) {
            deselectMarker(selectedItem)
        }
        selectedItem = item
        selectMarker(selectedItem!!, iconGenerator)
        // Show info window. See GoogleMap.InfoWindowAdapter.
        false
    }
    clusterRenderer.setOnClusterClickListener {
        deselectMarker(selectedItem)
        true
    }


private fun selectMarker(item: SomeClusterItem,
                         iconGenerator: IconGenerator) {
    // Generate a text marker.
    val icon = iconGenerator.makeIcon(item.title)
    val bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(icon)
    clusterRenderer?.getMarker(item)?.setIcon(bitmapDescriptor)
}

private fun deselectMarker(item: SomeClusterItem?) =
    clusterRenderer?.getMarker(item)?.setIcon(unselectedBitmap)

次に、これらの画像が表示されます（すべてのアイテムが選択されているわけではなく、1つのアイテムが選択されています）。

enter image description hereenter image description here

InfoWindowが表示されていることに注意してください。情報ウィンドウをカスタマイズするには、 https://stackoverflow.com/a/59952706/291414 を参照してください。

情報ウィンドウを削除するには、適切なメソッドでtrueを返すだけです（ Android google maps API v2）でマーカー情報ウィンドウを非表示にする を参照）。

clusterManager!!.setOnClusterItemClickListener { item ->
    ...
    true
}

enter image description here

0
CoolMind