2016-07-12 2 views
21

Ich bin nicht in der Lage überall auf Google API-Dokument zu finden, die seine Karte angepasst werden kann (ich weiß, es auf Web angepasst werden kann nur) aber kann sehen, auf dem Pokèmon Go App, die es benutzt Google API benutzerdefinierte zeigen Karte.Wie verwendet Pokémon Go eine benutzerdefinierte Google Karte mit Google Map API?

Referenz für Pokèmon Go verwendet google map: https://www.reddit.com/r/pokemongo/comments/4s71t1/suggestion_download_city_map_as_a_way_to_decrease/

Wer in der Lage, diesen Ansatz, um herauszufinden?

Custom Map i bedeutet die Karte unten mit grüner Farbe und blauem Himmel: enter image description here

+0

Kachelüberlagerungen könnten eine Option sein: https://developers.google.com/maps/documentation/android-api/tileoverlay – Juvi

+0

Die Pokemon Go-Karten wurde mit Mapbox Studio SDK entwickelt. –

+0

@HarshPatel Haben Sie eine Quelle dazu? – ThatBrianDude

Antwort

5

Wikipedia arcticle den Schöpfer von Pokèmon Go:

Niantic, Inc. ist ein Software-Entwicklungsunternehmen am besten bekannt für Entwicklung der Augmented Reality Handyspiele Ingress und Pokémon Go. Es wurde von Keyhole, Inc. Gründer John Hanke im Jahr 2010 als Niantic Labs, ein internes Startup bei Google gegründet.

Wie Sie sehen können, war Niantic ein internes Startup bei Google. Obwohl beide Unternehmen getrennte Wege gegangen sind, investiert Google weiterhin in Niantic. Also denke ich, dass Niantic einige Möglichkeiten hat, die uns nicht zur Verfügung stehen. Wie du gesagt hast, habe ich in den Google Maps-Dokumenten für Android keinen Weg gefunden.

Ich bin nicht genau sicher, ob das wahr ist, es ist nur eine Vermutung.

42

Ich weiß nicht, wie Pokémon GO es macht, aber Sie können mit einigen Layouttricks einen wirklich gut aussehenden Effekt bekommen. Ich verwende ein Himmelsbild und verdecke das Himmelsbild und die Karte mit einer Verlaufsansicht (um den Horizont zu simulieren) und der Karte mit einer halbtransparenten grünen Ansicht.

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, aber ich hinzufüge es so das Beispiel abgeschlossen ist)

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)); 
    } 
} 

Das Ergebnis sieht wie folgt aus:

enter image description here

Ein anderer Ansatz eine TileOverlay könnte unter Verwendung zu zeige eine benutzerdefinierte Karte an. Sie können weitere Informationen über Tile Overlays here finden.

Um das Beispiel zu verbessern, möchten Sie vielleicht dem Himmel einen Parallaxeffekt hinzufügen, damit er sich bewegt, wenn sich die Karte dreht.

+3

Sehr beeindruckend – MoGa

+1

Sie haben meinen Tag gemacht: D –

+0

Awesome, können Sie bitte eine Bitte mit diesem Beispiel einreichen? –