在Google地图上绘制心形多边形

时间:2017-10-17 16:03:43

标签: android google-maps-android-api-2 polygon

我正在尝试使用当前位置在Google地图上创建心形多边形。我能够识别一些LatLng并试图创建心形,但是没有显示预期的曲线。

您能否帮助我使用当前位置创建精确的心形多边形。

这是我用来创建心形的代码。

private static final int FRONT = 0;
private static final int RIGHT = 90;
private static final int LEFT = 270;

private void drawHeartPolygon(LatLng currentLatLng) {
    LatLng destLatLang = GetDestinationPoint(currentLatLng, FRONT, 0.050F);
    frontAngleCalculation(currentLatLng, destLatLang, 0.050F);
}

private void frontAngleCalculation(LatLng latLng, LatLng destLatLang, float distance) {
    PolygonOptions rectOptions = new PolygonOptions();
    LatLng centerLocation = GetDestinationPoint(latLng, FRONT, (distance + (distance/4)/2)/2);
    LatLng rightLocation = GetDestinationPoint(centerLocation, RIGHT, distance/2);
    LatLng leftLocation = GetDestinationPoint(centerLocation, LEFT, distance/2);
    LatLng centerLeftLocation = GetDestinationPoint(destLatLang, LEFT, distance/4);
    LatLng centerLeftTopLocation = GetDestinationPoint(centerLeftLocation, FRONT, (distance/4)/2);
    LatLng centerRightLocation = GetDestinationPoint(destLatLang, RIGHT, distance/4);
    LatLng centerRightTopLocation = GetDestinationPoint(centerRightLocation, FRONT, (distance/4)/2);
    rectOptions.add(new LatLng(latLng.latitude, latLng.longitude),
            leftLocation,
            centerLeftTopLocation,
            new LatLng(destLatLang.latitude, destLatLang.longitude),
            centerRightTopLocation,
            rightLocation);
    Log.d(TAG, "Current Location : "+latLng);

    rectOptions.strokeColor(Color.RED);

    // Get back the mutable Polygon
    Polygon polygon = mMap.addPolygon(rectOptions);
    List<PatternItem> pattern = Arrays.<PatternItem>asList(
            new Dot(), new Gap(20), new Dash(30), new Gap(20));
    polygon.setStrokePattern(pattern);
    polygon.setStrokeWidth(POLYGON_STROKE_WIDTH_PX);
    polygon.setStrokeColor(strokeColor);

}

public static LatLng GetDestinationPoint(LatLng startLoc, float bearing, float depth) {
    LatLng newLocation = null;

    double radius = 6371.0; // earth's mean radius in km
    double lat1 = Math.toRadians(startLoc.latitude);
    double lng1 = Math.toRadians(startLoc.longitude);
    double brng = Math.toRadians(bearing);
    double lat2 = Math.asin(Math.sin(lat1) * Math.cos(depth / radius) + Math.cos(lat1) * Math.sin(depth / radius) * Math.cos(brng));
    double lng2 = lng1 + Math.atan2(Math.sin(brng) * Math.sin(depth / radius) * Math.cos(lat1), Math.cos(depth / radius) - Math.sin(lat1) * Math.sin(lat2));
    lng2 = (lng2 + Math.PI) % (2 * Math.PI) - Math.PI;

    // normalize to -180...+180
    if (lat2 == 0 || lng2 == 0) {
        newLocation = new LatLng(0.0, 0.0);
    } else {
        newLocation = new LatLng(Math.toDegrees(lat2), Math.toDegrees(lng2));
    }

    return newLocation;
}


@Override
public void onMapReady(GoogleMap googleMap) {
    Log.d(TAG, "onMapReady");
    mMap = googleMap;
    LatLng latLng = new LatLng(latitude, longitude);
    mMap.addMarker(new MarkerOptions().position(latLng).draggable(true));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(latLng));
    mMap.setMaxZoomPreference(22.0f);
    mMap.setMinZoomPreference(17.0f);
    drawHeartPolygon(new LatLng(latitude,  longitude));


}

这是截图,显示了我实现的心形,但没有按照期望。

enter image description here

请给我参考或提示,用曲线绘制心形多边形。

1 个答案:

答案 0 :(得分:1)

我不知道你是否会喜欢这个答案,但这可以作为你的要求而且很容易,但不同。

只需放置一个标记:

        LatLng latLng1 = new LatLng(13.014849, 80.224343);
        mMap.addMarker(new MarkerOptions().position(latLng1).title("Name").snippet("snippet").flat(true).icon(BitmapDescriptorFactory.fromResource(R.drawable.marker1)));
        CameraPosition cameraPosition = new CameraPosition.Builder().target(latLng1).zoom(12).build();
        mMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

这里,marker1.png是通过photoshop创建的图像,它将提供相同的结果。

结果:
enter image description here

Marker1.png:
enter image description here

正如您所看到的,这里的marker1是包含标记+心脏的整个图像,但您也可以在同一LatLng上创建两个标记:第一个是红色标记,第二个是心脏。使用这种方式,infowindow只会在点击红色标记而不是提供的结果时打开,因为您可以禁用心脏的infowindow,或者您可以使用心脏的infowindow来获取其他信息。

正如我之前所说,这种解决方案不同,与自定义形状的多边形不相似,但很容易实现。