Pokèmon Go 如何使用 Google Map API 使用自定义 Google 地图? [英] How does Pokèmon Go uses custom Google map using Google Map API?

问题描述

我在 Google API 文档中找不到任何可以自定义其地图的(我知道它只能在网络上自定义)，但可以在 Pokèmon Go 上看到strong> 应用程序，它使用 Google API 来显示自定义地图.

Pokèmon Go 参考使用谷歌地图:

解决方案

我不知道 Pokémon GO 是如何做到的，但是您可以通过一些布局技巧获得非常漂亮的效果.我使用的是天空图像，我用渐变视图(以模拟地平线)和半透明绿色视图覆盖了天空图像和地图.

activity_maps.xml

<相对布局android:layout_width="match_parent"android:layout_height="170dp"><图像视图android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@drawable/sky"/><查看android:layout_width="match_parent"android:layout_height="20dp"android:layout_alignParentBottom="true"android:background="@drawable/gradientsky"/></RelativeLayout><相对布局android:layout_width="match_parent"android:layout_height="match_parent"><片段android:id="@+id/地图"android:name="com.google.android.gms.maps.SupportMapFragment"android:layout_width="match_parent"android:layout_height="match_parent"工具:上下文=mypackage.MapsActivity"/><查看android:layout_width="match_parent"android:layout_height="match_parent"android:background="#2200ff00"/><查看android:layout_width="match_parent"android:layout_height="20dp"android:background="@drawable/gradientmap"/></RelativeLayout></LinearLayout>

gradientsky.xml

<梯度机器人:角度=90"android:startColor="#ffffff"android:endColor="#00ffffff"/></形状>

gradientmap.xml

<梯度机器人:角度=270"android:startColor="#ffffff"android:endColor="#00ffffff"/></形状>

MapsActivity.java(微不足道，但我添加了它以便示例完整)

public class MapsActivity extends FragmentActivity 实现 OnMapReadyCallback {@覆盖protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_maps);SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);mapFragment.getMapAsync(this);}@覆盖public void onMapReady(GoogleMap 地图) {map.getUiSettings().setCompassEnabled(false);map.setMapType(GoogleMap.MAP_TYPE_NORMAL);CameraPosition cameraPosition = new CameraPosition.Builder().target(new LatLng(39.87266,-4.028275)).缩放(18).倾斜(67.5f).轴承(314).建造();map.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));}}

结果如下:

另一种方法是使用 TileOverlay 来显示自定义地图.您可以在此处找到有关磁贴叠加的更多信息.

为了改进示例，您可能需要为天空添加一些视差效果，以便它在地图旋转时移动.

I am not able to find anywhere on Google API document that its map can be customized (i know it can be customized on web only) but can see on the Pokèmon Go app that it uses Google API to show custom map.

Reference for Pokèmon Go uses google map: https://www.reddit.com/r/pokemongo/comments/4s71t1/suggestion_download_city_map_as_a_way_to_decrease/

Anyone able to figure out this approach?

Custom map i means the map below with green color and blue sky:

解决方案

I don't know how Pokémon GO does it, but you can get a really nice looking effect with some layout tricks. I'm using a sky image and I'm covering the sky image and the map with a gradient view (to simulate the horizon) and the map with a semitransparent green view.

activity_maps.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="170dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/sky"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_alignParentBottom="true"
            android:background="@drawable/gradientsky"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="mypackage.MapsActivity"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#2200ff00"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@drawable/gradientmap"/>

    </RelativeLayout>

</LinearLayout>

gradientsky.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#ffffff"
        android:endColor="#00ffffff" />
</shape>

gradientmap.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
        android:angle="270"
        android:startColor="#ffffff"
        android:endColor="#00ffffff" />
</shape>

MapsActivity.java (trivial, but I'm adding it so the example is complete)

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_maps);
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap map) {
        map.getUiSettings().setCompassEnabled(false);
        map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        CameraPosition cameraPosition = new CameraPosition.Builder()
                .target(new LatLng(39.87266,-4.028275))
                .zoom(18)
                .tilt(67.5f)
                .bearing(314)
                .build();
        map.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
    }
}

The result looks like this:

Another approach could be using a TileOverlay to show a custom map. You can find more info about Tile Overlays here.

To improve the example, you may want to add some parallax effect to the sky so it moves when the map rotates.

这篇关于Pokèmon Go 如何使用 Google Map API 使用自定义 Google 地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！