基于PHP值的Google Maps API V3中的不同标记

Question

我已经到了从通过PHP创建的标记集传递一个值的点，但我无法弄清楚如何创建或实现IF条件来显示标记与“类型”值相关的图像。

代码：

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

    } 

我很接近，但我不能找到类似的例子网上，这样寻找解决这一问题的帮助不大。

谢谢！

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