180912(수) - Google Maps (Shapes)

Google Maps

Shapes

- Polyline

connected line segments (mark paths and routes on the map)

-Polygon

enclosed shape

- Circle

map에 표시된 Earth's surface circle을 geographically accurate projection

Polylines

- Polyline 

- PolylineOptions

- point on the earth's surface LatLng

- GoogleMap.addPolyline(PolylineOptions)

// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions rectOptions = new PolylineOptions()
        .add(new LatLng(37.35, -122.0))
        .add(new LatLng(37.45, -122.0))  // North of the previous point, but at the same longitude
        .add(new LatLng(37.45, -122.2))  // Same latitude, and 30km to the west
        .add(new LatLng(37.35, -122.2))  // Same longitude, and 16km to the south
        .add(new LatLng(37.35, -122.0)); // Closes the polyline.

// Get back the mutable Polyline
Polyline polyline = myMap.addPolyline(rectOptions);

- 이미 added된 polyline에 new list를 전달하고 싶으면, Polyline.setPoints()

Polyline events

- default not clickable

- Polyline.setClickable(boolean)

- OnPolylineClickListener

- GoogleMap.setOnPolylineClickListener(OnPolylineClickListener)

- 마찬가지로 z-index value에 의한 click cycle이 존재 및 적용

Customizing appearances

- desired property가 적용된 shape를 map에 added before & after 시점에 모두 적용 가능하다.

Polyline line = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

Note : most shapes가 여기에 나온 properies를 적용 가능하지만, shape에 따라서 적용 불가능한 properties도 존재

Stroke color

- 32-bit ARGB integer 

- *Options.strokeColor() (orPolylineOptions.color()

- default color Color.BLACK

Fill color

- only applies to polygons and circles

Stroke width

- float in pixels (px)

- width not scale when map is zoomed

- *Options.strokeWidth() (or PolylineOptions.width() for a polyline)

- default width is 10px

Stroke pattern

- default pattern is solid line

- PatternItem

- dash, dot, gap

List<PatternItem> pattern = Arrays.<PatternItem>asList(
        new Dot(), new Gap(20), new Dash(30), new Gap(20));
mPolyline.setPattern(pattern);

Joint types

- bevel or round JointType

- internal bends in the line에 영향을 줌

- dots는 always circular이므로 not affect

mPolyline.setJointType(JointType.ROUND);




Line caps

- polyline style Cap

- butt (default), square, round, custom bitmap

- PolylineOptions.startCap and PolylineOptions.endCap

mPolyline.setStartCap(new RoundCap());

mPolyline.setEndCap(
        new CustomCap(BitmapDescriptorFactory.fromResource(R.drawable.arrow),
                16));

- BitmapDescriptorFactory.fromResource()

- use density-independent resource (nodpi)

Geodesic segments

- not apply circles

- polylines & polygons에서 consecutive vertices 사이의 line segments가 그려지는 방법을 determines

- Earth's surface의 shortest path를 따라가며, Mercator projection을 사용하여 curved lines 처럼 보일 수 있다.

- Non-geodesic segments is straight lines on the map 

-  *Options.geodesic() where true

- default is false (non-geodesic segments)

Z-index

- stack order of this shape (relative to other overlays)

- high z-index overlay는 lower z-indexes보다 above drawn

- 두 overlays의 z-index가 같으면 arbitrary order 적용

- default is 0

Visibility

- 아예 맵에서 permanently remove하고 싶으면 call remove()

Associate data with a shape

- Polyline.setTag()

- Polyline.getTag()

private GoogleMap mMap;

Polyline polyline = mMap.addPolyline((new PolylineOptions())
        .clickable(true)
        .add(new LatLng(-35.016, 143.321),
                new LatLng(-34.747, 145.592),
                new LatLng(-34.364, 147.891),
                new LatLng(-33.501, 150.217),
                new LatLng(-32.306, 149.248),
                new LatLng(-32.491, 147.309)));

polyline.setTag("A");