2011-02-15 107 views
0

我遇到的問題只是我無法獲取自定義圖標加載。標記本身加載,但只是默認圖標。如果我設置圖標,我可以加載自定義圖標:在標記對象中手動鍵入,如下所示:谷歌地圖上沒有顯示自定義圖標

 var marker = new google.maps.Marker({ 
      position: places[i], 
      map: map, 
      icon: sizeIcons['one'] 
     }) 

然後它們都加載得很好。但我想設置大小,所以我添加了下面的代碼,它在我的KML生成器中工作,但出於某種原因無法生成我的自定義圖標。任何想法爲什麼?我沒有張貼的所有代碼,但的$內容的價值[1]是50和450

的index.html之間的數字

$sizeFloat = (int) $content[1]; 
        if($sizeFloat < 50){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['one']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 50 && $sizeFloat < 70){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['two']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 70 && $sizeFloat < 75){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['three']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 75 && $sizeFloat < 88){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['four']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 88 && $sizeFloat < 100){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['five']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 100 && $sizeFloat < 125){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['six']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 125 && $sizeFloat < 150){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['seven']); 
         </script> 
         <?php 

        } 
        if($sizeFloat >= 150 && $sizeFloat < 175){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['eight']); 
         </script> 
         <?php 

        } 
        if($sizeFloat >= 175 && $sizeFloat < 200){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['nine']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 200 && $sizeFloat < 250){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['ten']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 250 && $sizeFloat < 275){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['eleven']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 275 && $sizeFloat < 350){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['twelve']); 
         </script> 
         <?php 
        } 
        if($sizeFloat >= 350){ 
         ?> 
         <script type="text/javascript"> 
          markerType.push(sizeIcons['thirteen']); 
         </script> 
         <?php 
        } 

        if ($content !== false) { 
        ?> 
         <script type="text/javascript">        
          places.push(new google.maps.LatLng(<?php echo json_encode($content[5]); ?>, <?php echo json_encode($content[6]); ?>)); 
         </script> 
        <?php   
        } 
        $id = $id + 1; 
       }  
       fclose($file); 
      } 
     ?> 
    <script type="text/javascript" src="js/map.js"></script> 

map.js

(function() { 
    // Creating a variable that will hold the InfoWindow object 
    var infowindow; 
    // Creating an array that will contain all the size icons 
    var sizeIcons = []; 
    sizeIcons['one'] = new google.maps.MarkerImage(
     'images/25.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['two'] = new google.maps.MarkerImage(
     'images/50.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['three'] = new google.maps.MarkerImage(
     'images/70.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['four'] = new google.maps.MarkerImage(
     'images/75.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['five'] = new google.maps.MarkerImage(
     'images/88.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['six'] = new google.maps.MarkerImage(
     'images/100.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['seven'] = new google.maps.MarkerImage(
     'images/125.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['eight'] = new google.maps.MarkerImage(
     'images/150.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['nine'] = new google.maps.MarkerImage(
     'images/175.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['ten'] = new google.maps.MarkerImage(
     'images/200.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['eleven'] = new google.maps.MarkerImage(
     'images/250.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['twelve'] = new google.maps.MarkerImage(
     'images/275.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 
    sizeIcons['thirteen'] = new google.maps.MarkerImage(
     'images/425.png', 
     new google.maps.Size(48, 48), 
     null, 
     new google.maps.Point(24, 24) 
    ); 

    window.onload = function() { 
     // Creating an object literal containing the properties 
     // we want to pass to the map 
     var options = { 
      zoom: 5, 
      center: new google.maps.LatLng(39.09, -95.71), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     // Creating the map 
     var map = new google.maps.Map(document.getElementById('map'), options); 
     // Creating a LatLngBounds object 
     var bounds = new google.maps.LatLngBounds(); 

     // Creating a variable that will hold 
     // the InfoWindow object 
     var infowindow; 
     // Looping through the places array 
     for (var i = 0; i < places.length; i++) { 
      // Adding the markers 
      var marker = new google.maps.Marker({ 
       position: places[i], 
       map: map, 
       icon: markerType[i] 
      }); 
      // Wrapping the event listener inside an anonymous function 
      // that we immediately invoke and passes the variable i to. 
      (function(i, marker) { 
       // Creating the event listener. It now has access to the values of 
       // i and marker as they were during its creation 
       google.maps.event.addListener(marker, 'click', function() { 
       // Check to see if we already have an InfoWindow 
       if (!infowindow) { 
        infowindow = new google.maps.InfoWindow(); 
       } 
       // Setting the content of the InfoWindow 
       infowindow.setContent('Place number ' + i); 
       // Tying the InfoWindow to the marker 
       infowindow.open(map, marker); 
       }); 
      })(i, marker); 
      // Extending the bounds object with each LatLng 
      bounds.extend(places[i]); 
     } 
     // Adjusting the map to new bounding box 
     map.fitBounds(bounds) 
    }; 
})(); 

回答

1

我米不確定,但可能是由於您缺少原點:new google.maps.Point(0,0)您目前通過的地方是null。通常情況下,當您只是將圖像URL傳遞爲圖標時,地圖API將爲您創建MarkerImage對象,並默認此信息並自動確定高度&寬度。我猜你想讓你的圖標與中心點對齊,因爲你的定位點是24,24。但您可能需要定義一個原點,即使它是0,0

可能使用一個精靈這些因爲谷歌給你的能力,使用一個單一的圖像和多個'平方'在該圖像作爲不同的點。假設你有100×100像素的圖像。在此圖像中,您可以將4個50x50圖標排列在網格中。所以一個MarkerImage可以從0,050,50,並且該行中的下一個將是0,50100,50。等第二行。

+0

我想過使用精靈,但有人已經創建了13個小圖標。另外,當我手動輸入icon:sizeIcons ['three']時,它工作正常。當我嘗試檢查大小併發送陣列中的信息時,它會再次停止工作 – shinjuo 2011-02-15 15:18:50