谷歌地图上的多个标记

Question

谷歌地图上的多个标记

javascriptgoogle-mapsgoogle-maps-api-3styling

3

大家好，我是SO的友好人士,

我正在寻求关于Google地图的一些指导... 我想在Google地图上设置不同样式的标记。我想要的样式将受数据库中帮助的变量的影响，例如酒店、咖啡馆、旅馆等。

我想根据这些值改变图标。我已经成功更改了默认图标，但根据数据库的值进行更改是一个问题。

我从一个不同的文件中获取了来自数据库的值，并将它们显示在地图上。例如，我使用point.hotelComments来收集酒店评论.. 所有的都正常显示，所以我的连接和打印都没有问题。我想要影响更改的设施存储在用户"Type"中。任何帮助或指导都将不胜感激！

我到目前为止用来在地图上打印的代码是：

<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>

- PoppaFluff

哪里出了问题？我会这样做。实际上并不需要使用下面的答案中的switch语句，如果你的不同变量组合起来可以形成图标的名称的话... - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frank Tudor · Accepted Answer

针对您的独特样式问题：

我们通常会这样做……请看是否能够理解并实现。

如果您还有问题，请告诉我，因为有些事情发生在此脚本之外（例如数据相关的内容）。

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