Google지도에 맞춤 아이콘이 표시되지 않습니다.

Question

문제는 내가 맞춤 아이콘을로드 할 수 없다는 것입니다. 마커 자체가로드되지만 기본 아이콘만으로로드됩니다. 아이콘을 설정하면로드 할 사용자 지정 아이콘을 얻을 수 있습니다. 다음과 같이 표식 개체에 수동으로 입력하십시오.

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

Answer 1

입니다 확실하지는 않지만 근원 점이 부족하기 때문일 수 있습니다. new google.maps.Point(0,0) 현재 null을 전달하는 곳입니다. 일반적으로 이미지 URL을 아이콘으로 전달하면지도 API에서 MarkerImage 개체를 만들고이 정보를 기본값으로 설정하여 높이를 자동으로 확인합니다 (&). 앵커 포인트가 24,24이기 때문에 아이콘이 중심점에 정렬되기를 원합니다. 하지만 0,0이더라도 원점을 정의해야 할 수 있습니다.

수 있습니다. Google은 하나의 이미지와 여러 이미지로 된 여러 개의 '사각형'을 다른 점으로 사용할 수 있기 때문에 스프라이트를 사용합니다. 100 x 100 픽셀 이미지가 있다고 가정 해 보겠습니다. 이 이미지 내에서 4 개의 50x50 아이콘을 격자로 배열 할 수 있습니다. 따라서 하나의 MarkerImage은 0,0에서 50,50까지이고 그 행의 다음은 0,50에서 100,50이 될 수 있습니다. 그리고 두 번째 열에 대해서도 마찬가지입니다.