21

我在我的應用程序中使用Google Map API v2來顯示地圖。如何在Google Map API v2的MapFragment上顯示多個標記?

我遵循了所有步驟,即在我的應用程序中啓用Google Map。

public class PinLocationOnMapView extends FragmentActivity { 

    private double mLatitude = 0.0, mLongitude = 0.0; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     SupportMapFragment fragment = SupportMapFragment.newInstance(); 
     getSupportFragmentManager().beginTransaction() 
       .add(android.R.id.content, fragment).commit(); 
    } 
} 

如果我用這個代碼,它顯示我的地圖,但如果我提供我的緯度/經度值,地圖圖塊不加載,我只看到白色的瓷磚。

以下是寫在上面的類的的onCreate()的代碼:

if (getIntent().getExtras() != null) { 
      final Bundle bundle = getIntent().getBundleExtra("LOCATION"); 
      mLatitude = bundle.getDouble("LATITUDE"); 
      mLongitude = bundle.getDouble("LONGITUDE"); 
     } else { 
      finish(); 
     } 

     GoogleMapOptions options = new GoogleMapOptions(); 
     LatLng latLng = new LatLng(mLatitude, mLongitude); 
     CameraPosition cameraPosition;// = new CameraPosition(latLng, 0, 0, 0); 
     cameraPosition = CameraPosition.fromLatLngZoom(latLng, (float) 14.0); 

     options.mapType(GoogleMap.MAP_TYPE_SATELLITE).camera(cameraPosition) 
       .zoomControlsEnabled(true).zoomGesturesEnabled(true); 

     SupportMapFragment fragment = SupportMapFragment.newInstance(options); 
     getSupportFragmentManager().beginTransaction() 
       .add(android.R.id.content, fragment).commit(); 

另外,我有緯度/經度值的列表。我想向他們展示MapFragment,如何在MapFragment上顯示多個標記?

我試過MapViewItemizedOverlay,但它沒有爲我工作。我相信我已經正確創建了SHA1密鑰來獲取API密鑰,因爲如果這是錯誤的,我也無法看到使用MapFragment的地圖,但是我可以看到如果我沒有通過緯度/對數值。

回答

33

我不喜歡這樣,以在地圖上顯示車位置用不同顏色的標記:

private void addMarkersToMap() { 
    mMap.clear(); 
    for (int i = 0; i < Cars.size(); i++) {   
      LatLng ll = new LatLng(Cars.get(i).getPos().getLat(), Cars.get(i).getPos().getLon()); 
      BitmapDescriptor bitmapMarker; 
      switch (Cars.get(i).getState()) { 
      case 0: 
       bitmapMarker = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED); 
       Log.i(TAG, "RED"); 
       break; 
      case 1: 
       bitmapMarker = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN); 
       Log.i(TAG, "GREEN"); 
       break; 
      case 2: 
       bitmapMarker = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE); 
       Log.i(TAG, "ORANGE"); 
       break; 
      default: 
       bitmapMarker = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED); 
       Log.i(TAG, "DEFAULT"); 
       break; 
      }    
      mMarkers.add(mMap.addMarker(new MarkerOptions().position(ll).title(Cars.get(i).getName()) 
        .snippet(getStateString(Cars.get(i).getState())).icon(bitmapMarker))); 

      Log.i(TAG,"Car number "+i+" was added " +mMarkers.get(mMarkers.size()-1).getId()); 
     } 
    } 

} 

汽車是自定義對象和mMarkers的ArrayList爲標誌的ArrayList

注意:您可以顯示在片段地圖是這樣的:

private GoogleMap mMap; 
.... 

private void setUpMapIfNeeded() { 
    // Do a null check to confirm that we have not already instantiated the 
    // map. 
    if (mMap == null) { 
     // Try to obtain the map from the SupportMapFragment. 
     mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap(); 
     // Check if we were successful in obtaining the map. 
     if (mMap != null) { 
      setUpMap(); 
     } 
    } 
} 




private void setUpMap() { 
    // Hide the zoom controls as the button panel will cover it. 
    mMap.getUiSettings().setZoomControlsEnabled(false); 

    // Add lots of markers to the map. 
    addMarkersToMap(); 

    // Setting an info window adapter allows us to change the both the 
    // contents and look of the 
    // info window. 
    mMap.setInfoWindowAdapter(new CustomInfoWindowAdapter()); 

    // Set listeners for marker events. See the bottom of this class for 
    // their behavior. 
    mMap.setOnMarkerClickListener(this); 
    mMap.setOnInfoWindowClickListener(this); 
    mMap.setOnMarkerDragListener(this); 

    // Pan to see all markers in view. 
    // Cannot zoom to bounds until the map has a size. 
    final View mapView = getSupportFragmentManager().findFragmentById(R.id.map).getView(); 
    if (mapView.getViewTreeObserver().isAlive()) { 
     mapView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
      @SuppressLint("NewApi") 
      // We check which build version we are using. 
      @Override 
      public void onGlobalLayout() { 
       LatLngBounds.Builder bld = new LatLngBounds.Builder(); 
    for (int i = 0; i < mAvailableCars.size(); i++) {   
      LatLng ll = new LatLng(Cars.get(i).getPos().getLat(), Cars.get(i).getPos().getLon()); 
      bld.include(ll);    
    } 
    LatLngBounds bounds = bld.build();   
    mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 70)); 
       mapView.getViewTreeObserver().removeGlobalOnLayoutListener(this); 

      } 
     }); 
    } 
} 

並調用setUpMapIfNeeded()onCreate()

+0

謝謝slezadav!我會嘗試這個,並讓你知道。 :) – Shrikant

+0

如何在MapFragment上顯示此mMarkers? – Shrikant

+1

編輯我的答案,因此它顯示瞭如何將帶有標記的整個地圖添加到MapFragment。方法addMarkersToMap()在setUpMap()方法中。 – slezadav

0

試試這個代碼在您的網站的根目錄調用的XML文件 -

添加標記的一種方法是加載駐留在根目錄(參見下面的代碼)中的xml文件,其中包含標記html。

此處的代碼設置地圖空間和側欄列以保存標記的地圖和鏈接。請注意,對於html和地圖項目,div標籤都帶有id和側欄td id。

您可以設置標記,但請注意需要使用必須正確標記的特殊字符;例如&符號(&)實際上應編碼爲「&」+「amp」+「;」 (不含引號)。這同樣適用於大於和小於字符,等等。如果您有多個標記,這是一件苦差事,但一旦就位,就很容易更改,因爲它不需要在應用程序內部構建或編碼任何程序集。在讀取文件的腳本中,技術上使用CDATA標籤應該不需要使用特殊字符表示,但對於Gmaps API v2,我仍然使用它們。對於我的例子,xml文件名是example3.xml。

您可以格式化像這樣的XML:

<Markers> 
<marker lat="47.881389" lng="-122.242222" 
html='&lt;div style="background-color:#FFFF88;font-family:Tahoma; font-size:12px;padding:6px; border:solid 1px black;"&gt;&lt;b&gt;SiteLines Park &#38; Playground Products&lt;/b&gt; &lt;br&gt;626 128th Street SW&lt;br&gt;Suite 104-A&lt;br&gt;Everett&#8218;&#160;WA 98204&lt;br&gt;Phone&#58; &#40;425&#41; 355-5655&lt;br&gt;&lt;b&gt;Toll&#160;Free&#58;&#160;&#40;800&#41;&#160;541-0869&lt;/b&gt;&lt;br&gt;Fax&#58;&#160;&#40;425&#41;&#160;347-3056&lt;br&gt;Email&#58;&#160;&lt;a href="mailto:[email protected]" target="blank"&gt;emailus&#64;sitelines.com&lt;/a&gt;&lt;br&gt;Web&#58;&#160;&lt;a href="http://www.sitelines.com" target="blank"&gt;www.sitelines.com&lt;/a&gt; &lt;/div&gt;'label="SiteLines Park &#38; Playground Products" /> 
</Markers> 

And for the html and script: 
<form style="background-color: #ffffff;" id="form1" runat="server"> 
<div style="text-align: center;"> 
<table style="border: 1px currentColor; vertical-align: middle;"> 
<tbody> 
<tr> 
<td style="background-color: #bbcae3; vertical-align: top;"> 
<div style="background-color: #e4e4e4; font-family: Tahoma; font-size: 12px; line-height: 22px; padding: 5px; text-decoration: underline; width: 210px; color: #000000; text-align: left;" id="side_bar"></div> 
</td> 
<td> 
<div style="height: 600px; width: 600px;" id="map"></div> 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
</form> 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAyUoL7QQqyBn6qU653XJGLxSjEdRKL8ahnZ9z8zIKzjlyzNOP2RRCsKP_vlAEzWT8jzEKS0_9RrXOAg"></script> 
<script type="text/javascript">// <![CDATA[ 
if (GBrowserIsCompatible()) { 
     // this variable will collect the html which will eventualy be placed in the side_bar 
     var side_bar_html = ""; 

     // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 
     var gmarkers = []; 
     var htmls = []; 
     var i = 0; 

     // A function to create the marker and set up the event window 
     function createMarker(point, name, html) { 
      var marker = new GMarker(point); 
      GEvent.addListener(marker, "click", function() { 
       marker.openInfoWindowHtml(html); 
      }); 

      // save the info we need to use later for the side_bar 
      gmarkers[i] = marker; 
      htmls[i] = html; 
      // add a line to the side_bar html 
      side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
      i++; 
      return marker; 
     } 

     // This function picks up the click and opens the corresponding info window 
     function myclick(i) { 
      gmarkers[i].openInfoWindowHtml(htmls[i]); 
     } 

     // create the map 
     var map = new GMap2(document.getElementById("map")); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GMapTypeControl()); 
     map.setCenter(new GLatLng(0, 0), 0); 
     // 
     // ===== Start with an empty GLatLngBounds object ===== 
     var bounds = new GLatLngBounds(); 

     // Read the data from example3.xml 
     GDownloadUrl("/testStore/example3.xml", function(doc) { 
      var xmlDoc = GXml.parse(doc); 
      var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 

      for (var i = 0; i < markers.length; i++) { 
       // obtain the attribues of each marker 
       var lat = parseFloat(markers[i].getAttribute("lat")); 
       var lng = parseFloat(markers[i].getAttribute("lng")); 
       var point = new GLatLng(lat, lng); 
       var html = markers[i].getAttribute("html"); 
       var label = markers[i].getAttribute("label"); 
       // create the marker 
       var marker = createMarker(point, label, html); 
       map.addOverlay(marker); 
      } 
      // put the assembled side_bar_html contents into the side_bar div 
      document.getElementById("side_bar").innerHTML = side_bar_html; 
     }); 
    } 

    else { 
     alert("Sorry, the Google Maps API is not compatible with this browser"); 
    } 
    // This Javascript is based on code provided by the 
    // Blackpool Community Church Javascript Team 
    // http://www.commchurch.freeserve.co.uk/ 
    // http://econym.googlepages.com/index.htm 

//]]>

2

我不知道也許ü固定的代碼,現在是好的,但在onCreate()

if (getIntent().getExtras() != null) { 
    final Bundle bundle = getIntent().getBundleExtra("LOCATION"); 
    mLatitude = bundle.getDouble("LATITUDE"); 
    mLatitude = bundle.getDouble("LONGITUDE"); 
} 

第二mLatitude我認爲這是mLongitude只是像你把它在未來的行。

對不起,如果我遲到了答案,是無用的。

+0

恩,謝謝..那是一個錯字.. :) – Shrikant

4

要在使用geoCoder將地址(即123 Testing Street Lodi ca)轉換爲LatLng時將多個標記添加到地圖,下面的示例代碼將起作用。

// convert address to lng lat and add markers to map 
public void addMarkersToMap() { 
    mMap.clear(); 
    Double[] latitude = new Double[addressArrayList.size()]; 
    Double[] longitude = new Double[addressArrayList.size()]; 
    String[] addrs = new String[addressArrayList.size()]; 
    addrs = addressArrayList.toArray(addrs); 
    List<Address> addressList; 
    if (addrs != null && addrs.length > 0) { 
     for (int i = 0; i < addrs.length; i++) { 
      try { 
       addressList = geoCoder.getFromLocationName(addrs[i], 1); 
       if (addressList == null || addressList.isEmpty() || addressList.equals("")) { 
        addressList = geoCoder.getFromLocationName("san francisco", 1); 
       } 
       latitude[i] = addressList.get(0).getLatitude(); 
       longitude[i] = addressList.get(0).getLongitude(); 
       System.out.println("latitude = " + latitude[i] + " longitude = " + longitude[i]); 
       mMap.addMarker(new MarkerOptions() 
          .position(new LatLng(latitude[i], longitude[i])) 
          .title(namesArrayList.get(i)) 
          .snippet(addressArrayList.get(i)) 
          .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)) 
          .alpha(0.7f) 
       ); 
      } catch (Exception e) { 
       e.printStackTrace(); 
      } // end catch 
     } 
    } 
} //end addMarkersToMap 
0

第一方法瞭解創建setupDestationLocation

public void setupDestationLocation(double longlat, double latitue, String title) { 
      LatLng Shop = new LatLng(longlat, latitue); 
    /* if (DestinationMarker != null) { 
     DestinationMarker.remove(); 
    }*/ 
    DestinationMarker = mMap.addMarker(new MarkerOptions() 
     .position(Shop) 
     .title(market_n) 
     .title(title) 
     .icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_marker_shop))); 
    CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(Shop, 14); 
    mMap.animateCamera(cameraUpdate); 

    } 

現在只是調用方法中的方法(onMapReady

String title = "market"; 
    for(int i = 0 ; i < 8 ; i++) { 
     double offset = i/08d; 

     setupDestationLocation(longlat+offset,latitue,title+i); 
    } 
相關問題