1. 首頁
  2. 問答
  3. Google Maps JS API v3標記顏色

Google Maps JS API v3標記顏色

2012-03-22 216 views
3

我正在使用一個奇妙的代碼庫，它允許我使用css樣式的信息框包含許多特定的標記。另外，我想在地圖上有三種不同類型的彩色標記來表示3條不同的河流。雖然有很多文章解釋如何爲標記着色，但是如果使用這些方法，我的代碼會崩潰。我需要關於如何爲每個位置分配特定顏色的幫助。除了更多的地點，這裏是我的代碼與默認的紅色標記：Google Maps JS API v3標記顏色

var locations = [ 
      ['<div id="mm-img"><a href="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-00.jpg" target="_blank"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-00-sm.jpg" /></a><h3>Mile Marker 0 East</h3><p>Old east channel river mouth, now East Waterway. Spokane street fishing pier. Location of historic river mouth, east channel Duwamish River.<br /><span style="font-size:10px;line-height:300%">photo: UW University Libraries</span></p></div>', 47.573600, -122.343585, 1], 

      ['<div id="mm-img"><a href="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-01.jpg" target="_blank"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-01-sm.jpg" /></a><h3>Mile Marker 1 East</h3><p>Kellog Island, Federal Center South, Diagonal Way, Oxbow Building, Shoreline Access. Proposed mile marker design for new Corps of Engineers building on the Duwamish River.</p></div>', 47.560398, -122.341732, 2], 

      ['<div id="mm-img"><a href="<?php echo $this->getThemePath()?>/mile-marker-img/BR-LWO.jpg" target="_blank"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/BR-LWO-sm.jpg" /></a><h3>Old Lake Washington Outlet</h3><p>Renton airport. Near Black River resort. View of Resort on Lake Washington prior to 1916, when the lake emptied via the Black River into the Duwamish.<br /><span style="font-size:10px;line-height:300%">photo: Renton Historical Museum</span></p></div>', 47.491100, -122.217169, 38]  
     ]; 

var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 13, 
      center: new google.maps.LatLng(47.524501, -122.319785), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var infowindow = new google.maps.InfoWindow(); 

     var marker, i; 

     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
      })(marker, i)); 
     }

來源

2012-03-22 spicynumber1

回答

0

不知道選擇使用哪種顏色的標準。它是位置數組中的最後一個值嗎？

我用一個PNG精靈爲我的標記，以便每個標記我有這樣的事情：

var redIcon = new google.maps.MarkerImage( 
    ABSPATH + 'images/map-icons.png', 
    new google.maps.Size(20, 25), 
    new google.maps.Point(0, 60), 
    new google.maps.Point(10, 85) 
);

然後你確定要使用的顏色，並將其附加到標記：

if (locations[i][3] == 38) { 
    icon = redIcon; 
} else { 
    icon = bluIcon; 
} 

marker.setIcon(icon);

來源

2012-03-22 08:36:37 hungerstar

2

謝謝Hungerstar提出一個同樣好的解決方案。不幸的是，如果我使用你的編碼，我將不得不重寫我已經完成的工作。通過朋友的幫助和this link的組合，我必須完成4個步驟，才能獲得不同顏色的標記以及位置列中的所有內容。

1）你有

[popup with a bunch of text, 47.491100, -122.217169, "blue", 38]

2）你把變量，數組中，描述你所得到

var icons = new Array(); 
icons["red"] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png",

3）真正偷偷摸摸的一部分，代碼我不得不地點只是從另一個傢伙的代碼複製，是如何命名顏色

if (!icons[iconColor]) { 
icons[iconColor] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_"+ iconColor +".png",

4）最後，你得到的圖標與

map: map, 
icon: getMarkerImage(locations[i][3])

來源

2012-03-24 19:56:31 spicynumber1

相關問題

 相關問題