2014-01-23 5 views
0

Google지도에 실제로 만든 복잡한 아이콘을 만들려고합니다.하지만 이제는 폴더에서 가져 와서 첨부 된 상수 아이콘 대신 이미지를 표시하도록 변경하려고합니다. 그 위도, 모든 단일 이미지에 대한 lng.Google지도의 아이콘을 이미지로 바꿉니다.

(이미지 목록을 작성하여 기능으로 보내고 있지만 작동하지는 않습니다.) 제안 방법은 무엇입니까? 나는 완전히 당신의 질문을 이해하지

function setLocationMap() { 
      var selectedObj = results.pop(); 
      var qLat = parseFloat(selectedObj["LocationLat"]); 
      var qLong = parseFloat(selectedObj["LocationLng"]); 
      var qZoom = parseFloat(selectedObj["Zoom"]); 
      var qSatelite = (selectedObj["Satellite"].toLowerCase() === "true"); 


      var qMapTypeId = google.maps.MapTypeId.ROADMAP 
      if (qSatelite) qMapTypeId = google.maps.MapTypeId.HYBRID 
//   var qMapTypeId = google.maps.MapTypeId.SATELLITE 
//   var qMapTypeId = google.maps.MapTypeId.HYBRID 
//   var qMapTypeId = google.maps.MapTypeId.TERRAIN   

      if (qLat != 0 && qLong != 0) { 
       var myLatlng = new google.maps.LatLng(qLat, qLong); 
       var mapOptions = { 
        zoom: qZoom, 
        center: myLatlng, 
        mapTypeId: qMapTypeId 
       } 

       var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

       map.setTilt(45); 
       map.setHeading(0); 
       setMarkers(map, beaches); 

      } 
     } 

     var beaches = [ 
      ['9-47 Hall Street', 40.698345, -73.968748, 4], 
      ['9-47 Hall Street', 40.698552, -73.969338, 9], 
      ['9-47 Hall Street', 40.698324, -73.969199, 8], 
      ['9-47 Hall Street', 40.69807, -73.968884, 7], 
      ['9-47 Hall Street', 40.698017, -73.968699, 6], 
      ['9-47 Hall Street', 40.698552, -73.969338, 5], 
      ['9-47 Hall Street', 40.698976, -73.969489, 3], 
      ['9-47 Hall Street', 40.699391, -73.970052, 2], 
      ['9-47 Hall Street', 40.698017,-73.969163, 1] 
     ]; 

     function setMarkers(map, val) { 


     var contentString = 
     '<div id="content">' + 
     '<div id="siteNotice">' + 
     '</div>' + 
     '<h3 id="firstHeading" class="firstHeading">Dispatch Information</h3>' + 
     '<div id="bodyContent">' + 
     '<p><b>Dispatch Officer</b>, FirstName: <b>Alon</b>, Last Name: <b>Gal</b> Site Manager</p>' + 
     '</div>' + 
     '</div>'; 
      var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
      }); 



     var image = { 
     url: '../Images/Layout/onDuty.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     size: new google.maps.Size(22, 19), 
     // The origin for this image is 0,0. 
     origin: new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     anchor: new google.maps.Point(0, 32) 
        }; 

     var shape = { 
      coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
      type: 'poly' 
     }; 
     for (var i = 0; i < val.length; i++) { 
      var beach = val[i]; 
     var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      draggable: true, 
      icon: image, 
      shape: shape, 
      title: beach[0], 
      zIndex: beach[3] 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
     }); 
    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
+0

가능한 중복 Google지도의 마커가 다른 색상] (http://stackoverflow.com/questions/16900210/colour-the-first-marker-of-a-google-map-a-different-colour) – geocodezip

답변

0

:

여기 내 코드입니다. 간단한 이미지 마커를 들어, 단지 google.maps.Marker 옵션의 아이콘 속성으로 이미지의 URL을 포함하는 문자열을 보내

var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     draggable: true, 
     icon: '../Images/Layout/onDuty.png', 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 

출처 : 컬러 처음 [의 https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

관련 문제