자바 스크립트, Google지도 마커 색상 변경

Question

Google지도 마커 색상을 Javascript로 변경하는 방법을 알고 있습니다.이 기능을 처음 사용하고 도움을 주시면 감사하겠습니다. 감사합니다.

난 당신이 마커 아이콘을 변경 시도 할 수 있습니다 V3 마커를 구글지도 API에서

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], 
    locations[i][2]), 
    animation: google.maps.Animation.DROP, 
    map: map 
}); 

Answer 1

를 만들려면 다음 코드를 사용했다. 녹색 아이콘 사용을위한 예를 들면 :

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

또는 마커 초기화의 일부로 :

marker = new google.maps.Marker({ 
    icon: 'http://...' 
}); 

다른 색상 :

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

var marker = new google.maps.Marker({ 
    id: "some-id", 
    icon: { 
     path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
     strokeColor: "red", 
     scale: 3 
    }, 
    map: map, 
    title: "some-title", 
    position: myLatlng 
}); 

다른 가능성을 this page를 참조하십시오 :등은

Answer 2

당신은 strokeColor 속성을 사용할 수 있습니다.

Answer 3

잘 작동하는이 코드를 사용할 수 있습니다.

var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/"); 

var marker = new google.maps.Marker({ 
      position: yourlatlong, 
      icon: pinImage, 
      map: map 
     }); 

see Example here

Answer 4

나는 하나의지도에 설정할 수 4 배, 그래서 나는 Google 개발자 예제를 사용하고 난 세트 3 노호 다음 함수에서

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

그것을 트위스트 더 많은 색상 옵션 :

function setMarkers(map, locations) { 
... 
var image = { 
    url: 'img/bullet_amarelo.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    size: new google.maps.Size(40, 40), 
    // 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, 40) 
    }; 
    var image1 = { 
      url: 'img/bullet_azul.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // 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, 40) 
      }; 
    var image2 = { 
      url: 'img/bullet_vermelho.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // 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, 40) 
     }; 
    var image3 = { 
      url: 'img/bullet_verde.png', 
      // This marker is 20 pixels wide by 32 pixels tall. 
      size: new google.maps.Size(40, 40), 
      // 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, 40) 
     }; 
... 
} 

이

for (var i = 0; i < locations.length; i++) { 
... 
    if (i==0) var imageV=image; 
    if (i==1) var imageV=image1; 
    if (i==2) var imageV=image2; 
    if (i==3) var imageV=image3; 
... 
# remember to change icon: image to icon: imageV 
} 

최종 결과 :

http://www.mercosul-line.com.br/site/teste.html

Answer 5

당신은 텍스트, 텍스트 색상을 지정할 수 있기 때문에이 Google Charts API을 사용하는 것이 좋습니다 채우기 색입니다 FOR에서 D 내가 각 선박에 대해 하나 개의 색상을 설정 울부 짖는 소리 및 윤곽선 색상, 모두 16 진수 색상 코드를 사용하여, 예 : 빨간색은 # FF0000입니다.

function getIcon(text, fillColor, textColor, outlineColor) { 
    if (!text) text = '•'; //generic map dot 
    var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png"; 
    return iconUrl; 
} 

를 그리고, 당신이 당신의 마커를 만들 때 당신은 단지 myColor 변수를 16 진수 값 (마이너스 해시 기호) 어디에, 같은 아이콘 속성을 설정 : 다음과 같이 호출 할 수 있습니다

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    animation: google.maps.Animation.DROP, 
    map: map, 
    icon: getIcon(null, myColor, myColor2, myColor3) 
}); 

http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000은 텍스트를 설정하고 색상 만 채워야하는 경우 조금 더 쉽게 읽을 수있는 대체 URL로 사용할 수 있습니다.

khurram의 답변은 Google Charts API로 리디렉션되는 제 3 자 사이트를 의미합니다. 이것은 그 사람이 당신이 묶인 서버를 내려 놓는 경우를 의미합니다. Google API가 제공하는 유연성은 물론 Google에 직접가는 신뢰도를 선호합니다. 각 색상의 값을 지정하면 효과가 없습니다.

Answer 6

당신은 구글 차트 API를 사용하여 즉시 RGB 코드와 색상을 생성 할 수 있습니다

예 :

var marker = new google.maps.Marker({ 
    position: marker, 
    title: 'Hello World', 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd' 
}); 

하여 전술 한 바와 같이

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd 

은 다음과 같습니다 #ddd 색 마커

Answer 7

var map_marker = $ (".지도 표시 자). children ("img "). attr ("src ") var pinImage = new google.maps.MarkerImage (map_marker);

 var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map, 
     icon: pinImage 
    }); 
    }