Question

我正在使用谷歌地图API3和一些Laravel 4.2

我需要根据来自我的数据库的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>

一切正常，但不能给这些标记中的每一种颜色不同。

我也会在'type: Rent'的末尾尝试这个locations并将其作为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，则上述代码应该有效。

根据var更改谷歌地图标记颜色

1 个答案: