javascript - Google map 上的多个标记

Question

你好 SO 的好人，

我正在寻找与 Google map 相关的一些指导。.我希望在 Google map 上设置不同样式的标记。我想要的样式将受到数据库中变量帮助的影响，即酒店、咖啡厅、住宿加早餐旅馆。

我想根据这些值更改图标。我已经更改了股票图标，没有什么问题，但是根据数据库中的值更改它们是一个问题。

我在差异文件中有从数据库传递的值，并且可以在 map 上显示它们。例如，我正在使用 point.hotelComments 来收集酒店评论。所有内容都显示正常，所以我的连接和打印都很好。我有便利设施 我想影响存储在数据库用户“类型”中的更改 非常感谢任何帮助或指导!

我目前用来打印到 map 上的代码是:

<div id="map-container" class="col-md-12"></div>

            <script>
                var markers = [];
                var map;

                  function initialize()
                   {

                        var mapOptions = 
                        {
                          center: new google.maps.LatLng(53.273224, -9.051864),
                          zoom: 15
                        };

                        map = new google.maps.Map(document.getElementById("map-container"),mapOptions);

                        $.ajax
                        ({
                            type: "GET",
                            dataType: "json",
                            url: "http://localhost/Project/mapdata2.php",
                            success: function (data) 
                            {
                                $.each(data,function(index,point)
                                {
                                    createMarker(point.Lat, point.Lng, map, point.hotelName, point.type, point );
                                });

                            }   
                        });
                    }
            google.maps.event.addDomListener(window, 'load', initialize);


            function createMarker(Lat, Lng, map, title, Type, point)
                {
                var latlng = new google.maps.LatLng(Lat, Lng);
                var iconBase = 'http://maps.google.com/mapfiles/ms/icons/';
                //http://maps.google.com/mapfiles/ms/icons/coffeehouse.png
                //http://maps.google.com/mapfiles/ms/icons/coffeehouse.shadow.png
                var marker = new google.maps.Marker(
                    {
                        position: latlng,
                        map: map,
                        title: title,
                        type: Type,
                        icon: iconBase + 'coffeehouse.png'

                        //icon: iconBase + 'icon_' + Type + '.png' 
                    });

                marker.setMap(map);

                markers.push(marker);



                //Adds content 
                      var contentString = '<div id="content">'+
                          '<div id="siteNotice">'+
                          '</div>'+
                          '<h1 id="firstHeading" class="leadBigBlue"> ' + point.hotelName +' </h1>'+   point.fullAddress +
                          '<div id="bodyContent">'+
                          '<p><b>' + point.hotelName + '</b>, ' +  point.hotelComments +  '  </p> ' +
                          '<p><b> Language 1 </b>   ' +  point.hotelLang +  ' </p>'+
                          '<p><b> Language 2</b>   ' +  point.hotelLang2 +  ' </p>'+
                          '<p><b> Cultures </b>   ' +  point.Cult +  ' </p>'+
                          '<p><b>Website</b> <a href="  ' +  point.localWeblink +  ' ">'+
                          'Press Here</a> </p>'+

                          '</div>'+
                          '</div>';

                      var infowindow = new google.maps.InfoWindow({
                          content: contentString
                      });

                      google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                      });
                }


    </script>

Answer 1

对于您独特的样式问题:

我们做这样的事情......看看你是否可以跟进并实现。

...如果您有任何问题请告诉我，因为有些事情发生在该脚本之外(数据内容)。

google.load('maps', '3', {
other_params: 'sensor=false'
});

google.setOnLoadCallback(initialize);

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';

    function initialize() {
    var center = new google.maps.LatLng(41.45,-98.87);

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < data.count; i++) {
    spinnerUp(i);
    }

        function spinnerUp() {

            var data_mapper = data.locationstuff[i];

            var latLng = new google.maps.LatLng(data_mapper.latitude,data_mapper.longitude);

            var boxText = "<div style='border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;'>";
                boxText += data_mapper.title + "<br>" + data_mapper.address + "<br>" + data_mapper.city + ", " + data_mapper.zip;
                boxText += "</div>";

            switch (data_mapper.iconSpecial)
                {
                case 0:
                  var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
                  break;
                case 1:
                  var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
                  break;
                }

            var marker = new google.maps.Marker({position: latLng,icon:iconColorSpecial});

            var infowindow = new google.maps.InfoWindow({
                                                    content: boxText
                                                    ,disableAutoPan: false
                                                    ,maxWidth: 0
                                                    ,pixelOffset: new google.maps.Size(0, 0)            
                                                    ,zIndex: null
                                                    <!---,boxStyle: { 
                                                    background: "url('http://www.garylittle.ca/map/artwork/tipbox.gif') no-repeat"
                                                    ,opacity: 0.75
                                                    ,width: "280px"
                                                    }--->
                                                    ,closeBoxMargin: "10px 2px 2px 2px"
                                                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                                                    ,infoBoxClearance: new google.maps.Size(1, 1)
                                                    ,isHidden: false
                                                    ,pane: "floatPane"
                                                    ,enableEventPropagation: false});

        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, this);});
        markers.push(marker);       
        }

        var markerCluster = new MarkerClusterer(map, markers);
    }
google.maps.event.addDomListener(window, 'load', initialize);