google-maps-api-3 - Google Maps JS API v3 标记颜色

Question

我正在使用一个很棒的代码库，它允许我有许多带有 css 样式信息框的特定标记。此外，我希望在 map 上使用三种不同类别的彩色标记来表示 3 条不同的河流。尽管有很多帖子解释了如何为标记着色，但如果我使用这些方法，我的代码就会崩溃。我需要有关如何为每个位置分配特定颜色的帮助。除了更多的位置，这里是我的带有默认红色标记的代码:

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

Answer 1

感谢 Hungerstar 提出同样好的解决方案。不幸的是，如果我要使用您的代码，我将不得不重写我已经完成的大部分工作。结合 friend 的帮助和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])