根据PHP值在Google Maps API V3中显示不同的标记

时间:2012-02-02 20:38:18

标签: google-maps google-maps-api-3

我已经到了通过PHP创建的标记集传递值但我无法弄清楚如何创建或实现IF条件以显示与Type值相关的标记图像。

代码:

<script type="text/javascript">


var iconStar = new google.maps.MarkerImage("googleMarkers/star.png",
                  new google.maps.Size(32, 28), 
                  new google.maps.Point(0, 0),
                 new google.maps.Point(16, 32));


var iconBlue = new google.maps.MarkerImage("images/mm_20_blue.png",
                  new google.maps.Size(12, 20), 
                  new google.maps.Point(0,0),
                 new google.maps.Point(6, 20));



var iconRed =  new google.maps.MarkerImage("images/mm_20_red.png",
                  new google.maps.Size(12, 20), 
                  new google.maps.Point(6, 20),
                 new google.maps.Point(5, 1));

var iconYellow  = new google.maps.MarkerImage("images/mm_20_yellow.png",
                  new google.maps.Size(12, 20), 
                  new google.maps.Point(6, 20),
                 new google.maps.Point(5, 1));

iconType = [] = iconStar;
iconType["0"] = iconStar;
iconType["1"] = iconBlue;
iconType["2"] = iconRed;
iconType["3"] = iconYellow;



        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();

        function addMarker(lat, lng, info, type) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: iconType,
                map: map
            });


            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });


            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
               // panTo puts you back to the original center - not good for zoomed in nav
               // map.panTo(center);
                currentPopup = null;
            });
        }


        function initMap() {
            map = new google.maps.Map(document.getElementById("map"),  {
                center: new google.maps.LatLng(0, 0),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                },
                navigationControl: true,
                navigationControlOptions: {
                 style: google.maps.NavigationControlStyle.DEFAULT
                }

            });







 <?php
 do {
 $name=$row_rsCity['DEALER']; 
 $lat=$row_rsCity['lat'];
  $lon=$row_rsCity['lng'];
  $desc=$row_rsCity['ADDRESS'];
  $city=$row_rsCity['CITY'];
  $state=$row_rsCity['STATE'];
  $phone=$row_rsCity['PHONENUMBER'];
  $type=$row_rsCity['DEALER_TYPE'];
  echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , $state<br />Phone: $phone',$type);\n");
  } while ($row_rsCity = mysql_fetch_assoc($rsCity));
  ?>
  center = bounds.getCenter();
  map.fitBounds(bounds);

  }

我很接近,但我在网上找不到类似的例子,所以在解决这个问题上寻求一些帮助。

谢谢!

1 个答案:

答案 0 :(得分:1)

调用addMarker函数时,需要通过函数列表中的类型传递图标类型(数字)。

然后在添加标记时。 :

function addMarker(lat, lng, info, type) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: iconType[type],
                map: map
            });

添加数字类型以引用图标数组中的正确图标.......

我以前从未这样做过,但我不明白为什么它不起作用。

如果这不起作用,您可能需要查看此示例。 :

Change individual markers in google maps directions api V3

Google Maps API v3: How do I dynamically change the marker icon?