GoogleMap 아이콘/마커의 색상을 동적으로 변경

Question

사용자 입력에 따라 GoogleMaps API V3로 마커/아이콘의 색상을 변경하려고합니다. 자바 또는 자바 프로그램에서 문자열 변수로 색상이나 링크를 전달하려고하면 색상이나 이미지 링크를 자바 스크립트에 하드 코딩 할 수 있지만 빨간색 마커가 표시되거나 기본값으로 표시되지 않습니다.

나는 다음의 모든 스레드에서와 구글 API 검토 한 :

• Google Maps API 3 - Custom marker color for default (dot) marker
• How do I change icon colour in Google Maps API V3?
• Google Maps API 3 - Custom marker color for default (dot) marker
• https://developers.google.com/maps/documentation/javascript/markers

모든의는이 중 하나 사용하려는 아이콘 아이콘이나 색상 HEX 코드는 이미 하드 코딩 된 자바 스크립트로.

나의 시도. address1과 color1은 모두 자바 코드에서 자바 스크립트로 전달되는 문자열입니다. 이 위치를 중심으로 기본 빨간색 마커를 표시하는지도 결과

function codeAddress(address1, color1){ 
var pinColor = color1; 
address=address1; 
document.geocoder.geocode({'address': address1}, function(results, status) { 
    app.callFromJavascript(address1); 
     if (status == google.maps.GeocoderStatus.OK) { 
     document.map.setCenter(results[0].geometry.location); 
     document.map.setZoom(13); 
     var marker = new google.maps.Marker({ 
      icon: pinColor, 
      position: results[0].geometry.location, 
      map: document.map 
       }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 

을 : | COLOR1의 문자열, 예를 들어

"4D8080 http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld •"이 될 수 있습니다. color1에 전달 된 문자열을 "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"으로 변경하면 마커가 전혀 표시되지 않습니다.

내가 전달한 변수에서 생성 할 수없는 것은 무엇입니까? 위치 표시자를 하드 코딩하지 않아도되고 불가능할 수 있습니까?

Answer 1

이 나를 위해 잘 작동이 :

var marker = new google.maps.Marker({ 
     icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"), 
     position: results[0].geometry.location, 
     map: document.map 
      }); 

그들은 하드 코딩 할 필요가 없습니다,하지만 당신은 URL에 통과 MarkerImage의 객체 유형을 사용할 필요가 없습니다.

16 진수 색상을 전달하고지도 API가 방금 선택한 색상을 기반으로 새 마커를 만들 수는 없습니다. 일반적으로 사용하려는 이미지 URL은 이미 사용하려는 각 색상별로 존재하는 것입니다. 그런 다음 내가 보여 준 것처럼 코드를 사용하십시오.

Answer 2

그래서 당신은 당신과 함께 이미 16 진수 코드를 가지고이

let carIcon = { 
    path: carsvg, 
    scale: 0.7, 
    strokeColor: 'white', 
    strokeWeight: 0.10, 
    fillOpacity: 1, 
    fillColor: '#404040', 
    offset: '2%', 
    anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front of car, 10,25 center of car 
}; 

이

let carmarker = new google.maps.Marker({ 
    position: carLatLng, 
    map: map, 
    title: "Car", 
    icon: carIcon, 
    setMap: map 
}); 

같은 마커 객체처럼 보이는 아이콘 OBJ가 있고 변경하려는 말한다면 아이콘의 색 그렇게하려면 이것은 당신이 가지고있는 색상의 16 진수 코드로해야

carIcon.fillColor = '#008000';
carmarker.setIcon(carIcon);

를 사용합니다. 희망이 도움이됩니다. 또한이 경우 색을 변경하려면 아이콘이 SVG 여야합니다.