Question

所以我在下面的代码标记是由使用邮政编码和城市的CMS系统创建的。一切正常，但我想要做的是改变每个引脚的颜色取决于我有3类红色，绿色和蓝色这个标记应该根据CMS系统中选择的类来改变。实现这一目标的最佳方式是什么？

$(document).ready(function () {
        var map;
        var elevator;
        var myOptions = {
            zoom: 3,
            center: new google.maps.LatLng(50, -30),
            mapTypeId: 'terrain'
        };

        map = new google.maps.Map($('#map_canvas')[0], myOptions);

        var styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}];

        map.setOptions({styles: styles});

        var iterator = 0;       
        var addresses = [   


       ['<div class="red"></div>New York', ' 10007'],


       ['<div class="green"></div>Mexico', ' 10100'],


       ['<div class="blue"></div>Spain', ' 04830'],

    ];


            for (var x = 0; x < addresses.length; x++) {
                    MarkMe();
            }


        function MarkMe() {
            var add = addresses[iterator];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var o = data.results[0]
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var pinColor = "red";
                var pinImage = new google.maps.MarkerImage('/assets/images/pin-' + pinColor + '.png',
                new google.maps.Size(22, 31));

                var content = '<div style="width: 150px;">' + add + '<br/></div>';

                var marker =  new google.maps.Marker({
                    position: latlng,
                    map: map,
                    clickable: true,
                    icon: pinImage,
                    title: o + '<br/>' + add,
                     });

    function getInfoCallback(map, content) {
                        var infowindow = new google.maps.InfoWindow({ content: content });
                        return function () {

                            infowindow.setContent(content);
                            infowindow.open(map, this);
                        };
                    };
                    google.maps.event.addListener(marker, 'click', getInfoCallback(map, content));

                });
                iterator++;
           }
        })

Answer 1

你可以创建1个类型的数组（餐馆，酒店）或设置验证的默认值

并尝试以下代码：

var marker_new = new Array();
var url = "";
if(a == "hotels"){
   url = "http://exampl.com/yellow.png";   
}else{
   url = "http://exampl.com/green.png"
}
marker_new[i] = google.maps.Marker({
                                 icon: _url;
                                 position: place.geometry.location,
                                 map: map
                               });

如何使用

    marker_new[i] = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    iw = new google.maps.InfoWindow({
      content: getIWContent(place)
    });
    iw.open(map, marker_new[i]);

如何使用

          marker_new[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP
          });
          google.maps.event.addListener(marker_new[i], 'click', getDetails(results[i], i));

或阅读更多内容：How can I modify the markers?

Google API多种标记，具有不同的颜色，具体取决于类

1 个答案: