根据var更改google map标记颜色

Question

我正在使用带有Laravel 4.2的Google Maps API3

我需要根据来自数据库的var为地图上的标记着色

例如，如果即将到来的var是Rent则标记应为红色，如果为Sell则标记应为绿色

这就是我尝试的

<script type="text/javascript">
            var locations = [
                    @foreach($bannerMapBin as $pin)
                ['<div style="width:300px;"><div style="float:left;margin-right:10px;height:92px;overflow:hidden;width:120px;"><a href="{{ URL::to('property-details/'.$pin->id) }}">@foreach($pin->propImages->slice(0, 1) as $image){{ HTML::image('images/propertyImages/'.$image->image, $pin->title, array('width'=>100, 'height'=>100)) }}@endforeach</a></div>{{ HTML::link('property-details/'.$pin->id, $pin->title) }} <br/> {{ $pin->propLocation->city }}</div>', {{ $pin->propLocation->lat }}, {{ $pin->propLocation->lng }}, 'type: Rent'],
                @endforeach
            ];
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(25.412392055138543, 51.188288833984416),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            var icons = {
                Rent: {
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                },
                Sell: {
                    icon: 'http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2%7CFF0000'
                }
            };

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    icon: icons[locations.type],
                    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));
            }
        </script>

一切正常，但不能为这些标记中的每一个赋予不同的颜色。

我还在locations的结尾尝试了这种'type: Rent' ，并将其设置为var，但没有按预期工作

Answer 1

查看代码， locations的内部元素不是对象-对象数组，而是多维数组。 我可以从访问元素的方式看出来，例如纬度和经度。 假设数组中的最后一个元素是类型，则可以使用最后一个索引获得类型，或者简单地说，数字3数组的长度为4。

var lastIndex = locations[i].length - 1; // total elements (zero-based) minus 1;
var iconType = icons[ locations[i][lastIndex] ].icon;

marker = new google.maps.Marker({
    icon: iconType,
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
});

或简化版：

marker = new google.maps.Marker({
    icon: icons[locations[i][4]].icon, // returns Rents or Sell
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
});

从理论上讲，如果删除最后一个字符串type: Rent ，则上面的代码应该可以工作type: Rent从内部数组中type: Rent 。