2017-04-09 161 views
2

在谷歌地圖從瀏覽器,具有彎曲的虛線是這樣的: enter image description here我可以在Google Maps Android中繪製彎曲的虛線嗎?

但是,當我在自己的Android項目實現谷歌地圖,它並沒有顯示這條線

enter image description here

如何繪製這條線?

+0

我認爲這是可能的,我在這裏找到一個[jsfiddle](http://jsfiddle.net/geocodezip/re6km2wp/3/)可以做到這一點。但問題是它使用[Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/)來使其工作。有關更多信息,請嘗試檢查此[SO問題](http:// stackoverflow。com/questions/13721008 /如何繪製虛線 - 折線-with-android-google-map-sdk-v2)如果它可以幫助你。 – KENdi

+0

@KENdi非常感謝,Google Maps Android API中的直線虛折線可以實現,但曲線虛線只出現在Javascript API中。我在iOS,Android上檢查過Google Maps應用程序,它沒有任何曲線,我猜這是不可能的(或者太難繪製) –

回答

9

您可以在兩點之間實現彎曲的虛線折線。爲此,您可以使用具有SphericalUtil類的Google Maps Android API Utility Library,並在代碼中應用一些數學運算來創建多段線。

您必須在您的gradle這個實用程序庫作爲

compile 'com.google.maps.android:android-maps-utils:0.5'

請看看我的示例活動和功能showCurvedPolyline (LatLng p1, LatLng p2, double k)它構造了兩點之間的虛線彎曲多段線。最後一個參數k定義折線的曲率,它可以是> 0和< = 1。在我的例子中,我用K = 0.5

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback { 

private GoogleMap mMap; 
private LatLng sydney1; 
private LatLng sydney2; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_maps); 
    // Obtain the SupportMapFragment and get notified when the map is ready to be used. 
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() 
      .findFragmentById(R.id.map); 
    mapFragment.getMapAsync(this); 
} 

@Override 
public void onMapReady(GoogleMap googleMap) { 
    mMap = googleMap; 

    mMap.getUiSettings().setZoomControlsEnabled(true); 

    // Add a marker in Sydney and move the camera 
    sydney1 = new LatLng(-33.904438,151.249852); 
    sydney2 = new LatLng(-33.905823,151.252422); 

    mMap.addMarker(new MarkerOptions().position(sydney1) 
      .draggable(false).visible(true).title("Marker in Sydney 1")); 
    mMap.addMarker(new MarkerOptions().position(sydney2) 
      .draggable(false).visible(true).title("Marker in Sydney 2")); 

    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney1, 16F)); 

    this.showCurvedPolyline(sydney1,sydney2, 0.5); 
} 

private void showCurvedPolyline (LatLng p1, LatLng p2, double k) { 
    //Calculate distance and heading between two points 
    double d = SphericalUtil.computeDistanceBetween(p1,p2); 
    double h = SphericalUtil.computeHeading(p1, p2); 

    //Midpoint position 
    LatLng p = SphericalUtil.computeOffset(p1, d*0.5, h); 

    //Apply some mathematics to calculate position of the circle center 
    double x = (1-k*k)*d*0.5/(2*k); 
    double r = (1+k*k)*d*0.5/(2*k); 

    LatLng c = SphericalUtil.computeOffset(p, x, h + 90.0); 

    //Polyline options 
    PolylineOptions options = new PolylineOptions(); 
    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dash(30), new Gap(20)); 

    //Calculate heading between circle center and two points 
    double h1 = SphericalUtil.computeHeading(c, p1); 
    double h2 = SphericalUtil.computeHeading(c, p2); 

    //Calculate positions of points on circle border and add them to polyline options 
    int numpoints = 100; 
    double step = (h2 -h1)/numpoints; 

    for (int i=0; i < numpoints; i++) { 
     LatLng pi = SphericalUtil.computeOffset(c, r, h1 + i * step); 
     options.add(pi); 
    } 

    //Draw polyline 
    mMap.addPolyline(options.width(10).color(Color.MAGENTA).geodesic(false).pattern(pattern)); 
} 

} 

您可以從GitHub

下載示例項目,完整代碼

https://github.com/xomena-so/so43305664

只是你代替我的API密鑰在app/src/debug/res/values/google_maps_api.xml

enter image description here

+0

非常感謝,它解決了我的問題。我很抱歉發表評論,因爲我在這個問題上的任務在很長一段時間之後又開始了,等待着再次開始。 –

1

感謝上述解決方案的@xomena。它在大多數情況下運行非常好。但需要一些改進:

  • k == 1,x是0和中點(P)將是相同的曲線中期(c)點。這意味着它應該是一條直線,但是當你計算該步時,它不是零,所以最終結果是一個半圓曲線,與上述條件不一致。

  • 當曲線足夠長,讓說LIMIT = 1000km,在h1 + i * step每個計算循環內做一個微小的錯誤到正確的值(由於java的double計算錯誤我猜)。然後,多段線的起點和終點與開始和結束座標不完全匹配。此外,折線的曲率是不可預知的,基於我的研究,其原因可能是地球表面的曲率,這可能會使您的計算基於標題不正確。

我速戰速決是重置,使之成爲一條直線。對於第二個問題,如果兩點之間的距離大於1000km的極限,則用k = 1畫一條直線對我來說將是一個更安全的選擇。

+0

感謝您分享此內容。請看看這個:stackoverflow.com/questions/46411266/draw-arc-polyline-in-google-map我可以有你最終爲showCurvedPolyline(..)方法寫的更新的解決方案 – Sonali