在谷歌地图上绘制心形多边形

Question

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

您能帮我使用当前位置创建精确的心形多边形吗？

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

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));


}

这是显示我实现但不符合预期的心形的屏幕截图。

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

Answer 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 创建的图像，将提供相同的结果。

结果：


Marker1.png:

如您所见，此处的标记 1 是包含标记 + 心脏的整个图像，但您也可以在同一 LatLng 上创建两个标记：第一个是红色标记，第二个是心脏。使用这种方式，infowindow 将仅在单击红色标记而不是提供的结果时打开，因为您可以禁用心脏的 infowindow，或者您可以使用心脏的 infowindow 获取其他信息。

正如我之前所说，这个解决方案是不同的，与自定义形状的多边形不同，但非常容易实现。