Как нарисовать на карте ломаные линии

В этом примере показано, как добавить на карту ломаные линии и настроить их. Например, так можно изобразить маршрут.

Подробную информацию вы найдете в документации.

Начало работы

Прежде чем воспользоваться образцом кода, настройте среду разработки. Подробнее об образцах кода Maps SDK для Android

Ознакомьтесь с кодом

KotlinJava


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

     

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:

  1. В Android Studio откройте меню File > New > Import Project (Файл > Создать > Импортировать проект).
  2. Перейдите в директорию, куда вы добавили репозиторий, и выберите каталог проекта для Kotlin или Java.

    • Kotlin: PATH-REPO/android-samples/ApiDemos/kotlin
    • Java: PATH-REPO/android-samples/ApiDemos/java
  3. Нажмите кнопку Открыть. Android Studio создаст проект с помощью Gradle.
  4. Создайте пустой файл secrets.properties в том же каталоге, где хранится файл проекта local.properties. Подробнее о том, как добавить в проект ключ API
  5. Добавьте в secrets.properties следующую строку, заменив YOUR_API_KEY на значение вашего ключа API:

    MAPS_API_KEY=YOUR_API_KEY
  6. Запустите приложение.