הצטרפו אלינו לאירוע הבא של Google Maps Platform Developer Community Day בסן פרנסיסקו בדצמבר. להגשת בקשה להשתתפות.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

שרטטו קווים פוליגוניים במפה

בדוגמה הזו מוסיפים ומגדירים קווים פוליגוניים במפה, למשל כדי לייצג מסלול של מסלול הגעה במפה.

מידע נוסף זמין במאמר בנושא קווים פוליגוניים.

שנתחיל?

כדי לנסות את הקוד לדוגמה, צריך להגדיר את סביבת הפיתוח. מידע נוסף זמין במאמר דוגמאות קוד של Maps SDK ל-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)
    applyInsets(findViewById(R.id.map_container))
}

override fun onMapReady(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 SamplesBaseActivity
        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 = {
        com.example.common_ui.R.string.cap_butt, // Default
        com.example.common_ui.R.string.cap_round,
        com.example.common_ui.R.string.cap_square,
        com.example.common_ui.R.string.cap_image,
    };

    private static final int[] JOINT_TYPE_NAME_RESOURCE_IDS = {
        com.example.common_ui.R.string.joint_type_default, // Default
        com.example.common_ui.R.string.joint_type_bevel,
        com.example.common_ui.R.string.joint_type_round,
    };

    private static final int[] PATTERN_TYPE_NAME_RESOURCE_IDS = {
        com.example.common_ui.R.string.pattern_solid, // Default
        com.example.common_ui.R.string.pattern_dashed,
        com.example.common_ui.R.string.pattern_dotted,
        com.example.common_ui.R.string.pattern_mixed,
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(com.example.common_ui.R.layout.polyline_demo);

        hueBar = findViewById(com.example.common_ui.R.id.hueSeekBar);
        hueBar.setMax(MAX_HUE_DEGREES);
        hueBar.setProgress(0);

        alphaBar = findViewById(com.example.common_ui.R.id.alphaSeekBar);
        alphaBar.setMax(MAX_ALPHA);
        alphaBar.setProgress(MAX_ALPHA);

        widthBar = findViewById(com.example.common_ui.R.id.widthSeekBar);
        widthBar.setMax(MAX_WIDTH_PX);
        widthBar.setProgress(MAX_WIDTH_PX / 2);

        startCapSpinner = findViewById(com.example.common_ui.R.id.startCapSpinner);
        startCapSpinner.setAdapter(
                new ArrayAdapter<>(
                        this,
                        android.R.layout.simple_spinner_item,
                        getResourceStrings(CAP_TYPE_NAME_RESOURCE_IDS)));

        endCapSpinner = findViewById(com.example.common_ui.R.id.endCapSpinner);
        endCapSpinner.setAdapter(
                new ArrayAdapter<>(
                        this,
                        android.R.layout.simple_spinner_item,
                        getResourceStrings(CAP_TYPE_NAME_RESOURCE_IDS)));

        jointTypeSpinner = findViewById(com.example.common_ui.R.id.jointTypeSpinner);
        jointTypeSpinner.setAdapter(
                new ArrayAdapter<>(
                        this,
                        android.R.layout.simple_spinner_item,
                        getResourceStrings(JOINT_TYPE_NAME_RESOURCE_IDS)));

        patternSpinner = findViewById(com.example.common_ui.R.id.patternSpinner);
        patternSpinner.setAdapter(
                new ArrayAdapter<>(
                        this,
                        android.R.layout.simple_spinner_item,
                        getResourceStrings(PATTERN_TYPE_NAME_RESOURCE_IDS)));

        clickabilityCheckbox = findViewById(com.example.common_ui.R.id.toggleClickability);

        SupportMapFragment mapFragment =
                (SupportMapFragment)
                        getSupportFragmentManager()
                                .findFragmentById(com.example.common_ui.R.id.map);
        mapFragment.getMapAsync(this);

        applyInsets(findViewById(com.example.common_ui.R.id.map_container));
    }


    @Override
    public void onMapReady(GoogleMap map) {

        // Override the default content description on the view, for accessibility mode.
        map.setContentDescription(
                getString(com.example.common_ui.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, לוחצים על File > ‏New > ‏Import Project (קובץ > חדש > ייבוא פרויקט).
עוברים למיקום שבו שמרתם את המאגר ובוחרים את ספריית הפרויקט של Kotlin או Java:
- Kotlin:‏ PATH-REPO/android-samples/ApiDemos/kotlin
- Java: PATH-REPO/android-samples/ApiDemos/java
לוחצים על פתיחה. ‫Android Studio יוצר את הפרויקט באמצעות כלי ה-build של Gradle.
יוצרים קובץ secrets.properties ריק באותה ספרייה שבה נמצא קובץ local.properties של הפרויקט. מידע נוסף על הקובץ הזה זמין במאמר הוספת מפתח ה-API לפרויקט.
מקבלים מפתח API מהפרויקט שבו מופעל SDK של מפות ל-Android.
מוסיפים את המחרוזת הבאה ל-secrets.properties, ומחליפים את YOUR_API_KEY בערך של מפתח ה-API:
```
MAPS_API_KEY=YOUR_API_KEY
```
מפעילים את האפליקציה.

שרטטו קווים פוליגוניים במפה קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.