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

问题描述

我无法在Google API文档中找到可以自定义其地图的任何地方（我知道它只能在网络上自定义），但可以在PokèmonGo 它使用Google API显示自定义地图。

参考PokèmonGo使用谷歌地图：

解决方案

我不知道PokémonGO是如何做到的，但您可以通过一些布局技巧获得非常好的效果。我正在使用天空图像，并使用渐变视图（模拟地平线）和具有半透明绿色视图的地图覆盖天空图像和地图。

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> 
 
  android：layout_width =match_parent
 android：layout_height =match_parent
 android：scaleType =centerCrop
 android： SRC = @绘制/天空/> 
 
< View 
 android：layout_width =match_parent
 android：layout_height =20dp
 android：layout_alignParentBottom =true
 android：背景= @绘制/ 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.0encoding =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.0encoding =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 （不重要，但我将它添加到示例已完成）

  public class MapsActivity扩展FragmentActivity实现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））; 
 
 
 
 
 $ b $ p $结果如下所示：
 
 
 
  
 
 
 
另一种方法是使用TileOverlay来显示自定义地图。您可以在此处找到有关Tile叠加层的更多信息。
 
 
 
为了改善这个例子，您可能希望在天空中添加一些视差效果，以便在地图旋转时移动。
 
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èmonGo如何使用Google Map API使用自定义Google地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！