本例在地圖上新增及設定折線,例如用以表示地圖上的路線。
詳情請參閱說明文件。
開始使用
請務必先設定開發環境,再試用程式碼範例。詳情請參閱「Maps SDK for Android 程式碼範例」一文。
查看程式碼
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.polyline_demo) hueBar = findViewById<SeekBar>(R.id.hueSeekBar).apply { max = MAX_HUE_DEGREES progress = 0 } alphaBar = findViewById<SeekBar>(R.id.alphaSeekBar).apply { max = MAX_ALPHA progress = MAX_ALPHA } widthBar = findViewById<SeekBar>(R.id.widthSeekBar).apply { max = MAX_WIDTH_PX progress = MAX_WIDTH_PX / 2 } startCapSpinner = findViewById<Spinner>(R.id.startCapSpinner).apply { adapter = ArrayAdapter(this@PolylineDemoActivity, android.R.layout.simple_spinner_item, getResourceStrings(capTypeNameResourceIds)) } endCapSpinner = findViewById<Spinner>(R.id.endCapSpinner).apply { adapter = ArrayAdapter(this@PolylineDemoActivity, android.R.layout.simple_spinner_item, getResourceStrings(capTypeNameResourceIds)) } jointTypeSpinner = findViewById<Spinner>(R.id.jointTypeSpinner).apply { adapter = ArrayAdapter(this@PolylineDemoActivity, android.R.layout.simple_spinner_item, getResourceStrings(jointTypeNameResourceIds)) } patternSpinner = findViewById<Spinner>(R.id.patternSpinner).apply { adapter = ArrayAdapter( this@PolylineDemoActivity, android.R.layout.simple_spinner_item, getResourceStrings(patternTypeNameResourceIds)) } clickabilityCheckbox = findViewById<CheckBox>(R.id.toggleClickability) val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as SupportMapFragment mapFragment.getMapAsync(this) } override fun onMapReady(googleMap: GoogleMap) { googleMap with(googleMap) { // Override the default content description on the view, for accessibility mode. setContentDescription(getString(R.string.polyline_demo_description)) // A geodesic polyline that goes around the world. addPolyline(PolylineOptions().apply { add(lhrLatLng, aklLatLng, laxLatLng, jfkLatLng, lhrLatLng) width(INITIAL_STROKE_WIDTH_PX.toFloat()) color(Color.BLUE) geodesic(true) clickable(clickabilityCheckbox.isChecked) }) // Move the googleMap so that it is centered on the mutable polyline. moveCamera(CameraUpdateFactory.newLatLngZoom(melbourneLatLng, 3f)) // Add a listener for polyline clicks that changes the clicked polyline's color. setOnPolylineClickListener { polyline -> // Flip the values of the red, green and blue components of the polyline's color. polyline.color = polyline.color xor 0x00ffffff } } // A simple polyline across Australia. This polyline will be mutable. mutablePolyline = googleMap.addPolyline(PolylineOptions().apply{ color(Color.HSVToColor( alphaBar.progress, floatArrayOf(hueBar.progress.toFloat(), 1f, 1f))) width(widthBar.progress.toFloat()) clickable(clickabilityCheckbox.isChecked) add(melbourneLatLng, adelaideLatLng, perthLatLng, darwinLatLng) }) arrayOf(hueBar, alphaBar, widthBar).map { it.setOnSeekBarChangeListener(this) } arrayOf(startCapSpinner, endCapSpinner, jointTypeSpinner, patternSpinner).map { it.onItemSelectedListener = this } with(mutablePolyline) { startCap = getSelectedCap(startCapSpinner.selectedItemPosition) ?: ButtCap() endCap = getSelectedCap(endCapSpinner.selectedItemPosition) ?: ButtCap() jointType = getSelectedJointType(jointTypeSpinner.selectedItemPosition) pattern = getSelectedPattern(patternSpinner.selectedItemPosition) } clickabilityCheckbox.setOnClickListener { view -> mutablePolyline.isClickable = (view as CheckBox).isChecked } }
Java
public class PolylineDemoActivity extends AppCompatActivity implements OnSeekBarChangeListener, OnItemSelectedListener, OnMapReadyCallback { // City locations for mutable polyline. private static final LatLng ADELAIDE = new LatLng(-34.92873, 138.59995); private static final LatLng DARWIN = new LatLng(-12.4258647, 130.7932231); private static final LatLng MELBOURNE = new LatLng(-37.81319, 144.96298); private static final LatLng PERTH = new LatLng(-31.95285, 115.85734); // Airport locations for geodesic polyline. private static final LatLng AKL = new LatLng(-37.006254, 174.783018); private static final LatLng JFK = new LatLng(40.641051, -73.777485); private static final LatLng LAX = new LatLng(33.936524, -118.377686); private static final LatLng LHR = new LatLng(51.471547, -0.460052); private static final int MAX_WIDTH_PX = 100; private static final int MAX_HUE_DEGREES = 360; private static final int MAX_ALPHA = 255; private static final int CUSTOM_CAP_IMAGE_REF_WIDTH_PX = 50; private static final int INITIAL_STROKE_WIDTH_PX = 5; private static final int PATTERN_DASH_LENGTH_PX = 50; private static final int PATTERN_GAP_LENGTH_PX = 20; private static final Dot DOT = new Dot(); private static final Dash DASH = new Dash(PATTERN_DASH_LENGTH_PX); private static final Gap GAP = new Gap(PATTERN_GAP_LENGTH_PX); private static final List<PatternItem> PATTERN_DOTTED = Arrays.asList(DOT, GAP); private static final List<PatternItem> PATTERN_DASHED = Arrays.asList(DASH, GAP); private static final List<PatternItem> PATTERN_MIXED = Arrays.asList(DOT, GAP, DOT, DASH, GAP); private Polyline mutablePolyline; private SeekBar hueBar; private SeekBar alphaBar; private SeekBar widthBar; private Spinner startCapSpinner; private Spinner endCapSpinner; private Spinner jointTypeSpinner; private Spinner patternSpinner; private CheckBox clickabilityCheckbox; // These are the options for polyline caps, joints and patterns. We use their // string resource IDs as identifiers. private static final int[] CAP_TYPE_NAME_RESOURCE_IDS = { R.string.cap_butt, // Default R.string.cap_round, R.string.cap_square, R.string.cap_image, }; private static final int[] JOINT_TYPE_NAME_RESOURCE_IDS = { R.string.joint_type_default, // Default R.string.joint_type_bevel, R.string.joint_type_round, }; private static final int[] PATTERN_TYPE_NAME_RESOURCE_IDS = { R.string.pattern_solid, // Default R.string.pattern_dashed, R.string.pattern_dotted, R.string.pattern_mixed, }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.polyline_demo); hueBar = findViewById(R.id.hueSeekBar); hueBar.setMax(MAX_HUE_DEGREES); hueBar.setProgress(0); alphaBar = findViewById(R.id.alphaSeekBar); alphaBar.setMax(MAX_ALPHA); alphaBar.setProgress(MAX_ALPHA); widthBar = findViewById(R.id.widthSeekBar); widthBar.setMax(MAX_WIDTH_PX); widthBar.setProgress(MAX_WIDTH_PX / 2); startCapSpinner = findViewById(R.id.startCapSpinner); startCapSpinner.setAdapter(new ArrayAdapter<>( this, android.R.layout.simple_spinner_item, getResourceStrings(CAP_TYPE_NAME_RESOURCE_IDS))); endCapSpinner = findViewById(R.id.endCapSpinner); endCapSpinner.setAdapter(new ArrayAdapter<>( this, android.R.layout.simple_spinner_item, getResourceStrings(CAP_TYPE_NAME_RESOURCE_IDS))); jointTypeSpinner = findViewById(R.id.jointTypeSpinner); jointTypeSpinner.setAdapter(new ArrayAdapter<>( this, android.R.layout.simple_spinner_item, getResourceStrings(JOINT_TYPE_NAME_RESOURCE_IDS))); patternSpinner = findViewById(R.id.patternSpinner); patternSpinner.setAdapter(new ArrayAdapter<>( this, android.R.layout.simple_spinner_item, getResourceStrings(PATTERN_TYPE_NAME_RESOURCE_IDS))); clickabilityCheckbox = findViewById(R.id.toggleClickability); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map); mapFragment.getMapAsync(this); } @Override public void onMapReady(GoogleMap map) { // Override the default content description on the view, for accessibility mode. map.setContentDescription(getString(R.string.polyline_demo_description)); // A geodesic polyline that goes around the world. map.addPolyline(new PolylineOptions() .add(LHR, AKL, LAX, JFK, LHR) .width(INITIAL_STROKE_WIDTH_PX) .color(Color.BLUE) .geodesic(true) .clickable(clickabilityCheckbox.isChecked())); // A simple polyline across Australia. This polyline will be mutable. int color = Color.HSVToColor( alphaBar.getProgress(), new float[]{hueBar.getProgress(), 1, 1}); mutablePolyline = map.addPolyline(new PolylineOptions() .color(color) .width(widthBar.getProgress()) .clickable(clickabilityCheckbox.isChecked()) .add(MELBOURNE, ADELAIDE, PERTH, DARWIN)); hueBar.setOnSeekBarChangeListener(this); alphaBar.setOnSeekBarChangeListener(this); widthBar.setOnSeekBarChangeListener(this); startCapSpinner.setOnItemSelectedListener(this); endCapSpinner.setOnItemSelectedListener(this); jointTypeSpinner.setOnItemSelectedListener(this); patternSpinner.setOnItemSelectedListener(this); mutablePolyline.setStartCap(getSelectedCap(startCapSpinner.getSelectedItemPosition())); mutablePolyline.setEndCap(getSelectedCap(endCapSpinner.getSelectedItemPosition())); mutablePolyline.setJointType(getSelectedJointType(jointTypeSpinner.getSelectedItemPosition())); mutablePolyline.setPattern(getSelectedPattern(patternSpinner.getSelectedItemPosition())); // Move the map so that it is centered on the mutable polyline. map.moveCamera(CameraUpdateFactory.newLatLngZoom(MELBOURNE, 3)); // Add a listener for polyline clicks that changes the clicked polyline's color. map.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener() { @Override public void onPolylineClick(Polyline polyline) { // Flip the values of the red, green and blue components of the polyline's color. polyline.setColor(polyline.getColor() ^ 0x00ffffff); } }); } }
複製並執行範例
需要使用 Git 才能在本機執行這個範例。下列指令會複製範例應用程式存放區。
git clone git@github.com:googlemaps-samples/android-samples.git
將範例專案匯入 Android Studio:
- 在 Android Studio 中,選取「檔案」>「新增」>「匯入專案」。
前往您儲存存放區的位置,然後選取 Kotlin 或 Java 的專案目錄:
- Kotlin:
PATH-REPO/android-samples/ApiDemos/kotlin
- Java:
PATH-REPO/android-samples/ApiDemos/java
- Kotlin:
- 選取「開啟」。Android Studio 會使用 Gradle 建構工具來建立您的專案。
- 在與專案的
local.properties
檔案相同的目錄中,建立空白的secrets.properties
檔案。詳情請參閱「將 API 金鑰加到專案」一文。 將下列字串加到
secrets.properties
,並將 YOUR_API_KEY 換成您 API 金鑰的值:MAPS_API_KEY=YOUR_API_KEY
- 執行應用程式。