마커로 가득 찬지도를 만들기 위해 Google Maps API를 사용하고 있지만 마커 하나가 다른 마커와 차별화되도록하고 싶습니다. 가장 간단한 방법은 마커의 색상을 빨간색 대신 파란색으로 변경하는 것입니다. 이것은 간단한 일입니까, 아니면 완전히 새로운 아이콘을 만들어야합니까? 새 아이콘을 만들어야하는 경우 가장 쉬운 방법은 무엇입니까?
답변
맵 v2는 더 이상 사용되지 않으므로 v3 맵에 관심이있을 것입니다 : https://developers.google.com/maps/documentation/javascript/markers#simple_icons
v2 맵의 경우 :
http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview
하나의 로직 세트는 모든 ‘정규’핀을 수행하고 다른 로직은 정의 된 새 마커를 사용하여 ‘특수’핀을 수행합니다.
답변
Google Maps API 버전 3을 사용하는 가장 쉬운 방법은 Benjamin Keen이 만든 아이콘과 같은 맞춤 아이콘을 가져 오는 것입니다.
http://www.benjaminkeen.com/?p=105
해당 아이콘을 모두지도 페이지와 같은 곳에두면 마커를 만들 때 적절한 아이콘 옵션을 사용하여 간단히 마커를 채색 할 수 있습니다.
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'brown_markerA.png'
});
이것은 매우 쉽고, 현재 작업중 인 프로젝트에 사용하는 접근 방식입니다.
답변
MapIconMaker : Google Maps v2 용 라이브러리
한 가지 방법은 MapIconMaker (데드 링크) 를 사용하는 것 입니다. 여기에 예가 있습니다 (데드 링크). Google지도 기본 아이콘의 너비는 20px, 높이는 34px이므로 다음과 같이 에뮬레이션 할 수 있습니다.
var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});
당신은 그것을 쉽게 할 수 있도록 몇 가지 기능으로 포장 할 수도 있습니다.
function getIcon(color) {
return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}
그것이 내가 만든 모든 마커에 개인적으로 사용하는 것입니다. 변덕스러운 색상을 변경하는 옵션을 선호합니다.
업데이트 : 기본 아이콘의 16 진수 색상은 “# FE7569″입니다. 또한 새 아이콘으로 새 마커를 만드는 대신 마커에서 이미지를 설정할 수 있습니다. 따라서 함수를 강조 표시하려면 위의 함수를 사용하여 다음과 같이 할 수 있습니다.
function highlightMarker(marker, highlight) {
var color = "#FE7569";
if (highlight) {
color = "#0000FF";
}
marker.setImage(getIcon(color).image);
}
StyledMarker : Google Maps v3 용 라이브러리
V2가 언젠가 V3으로 바뀌 었 으므로이 답변을 업데이트해야한다고 생각했습니다. 나는 V3 유틸리티 라이브러리에서 찾을 수 있습니다 사용자 정의 마커에 대한 라이브러리를 만들어 여기 (deadlink). 다양한 색상과 모양을 사용할 수 있으며 마커에 텍스트를 배치 할 수도 있습니다. Google지도 유형 마커를 만드는 방법이있는 Google 차트 API를 사용하여 작동합니다. Google Charts API를 직접 사용하려면 소스 코드를 확인하십시오.
그러나 해당 라이브러리에 대한 것은 이러한 마커 이미지의 클릭 가능한 영역을 정의하는 것이므로 예를 들어 텍스트가 많은 버블은 이 예제 (데드 링크) 와 같이 클릭 가능한 영역을 갖게됩니다.
답변
머티리얼 디자인
프로그래밍 방식의 핀 색상으로 편집 한 2019 년 3 월
순수한 자바 스크립트, 이미지 없음, 지원 레이블
더 이상 사용되지 않는 Charts API에 의존하지 않습니다.
var pinColor = "#FFFFFF";
var pinLabel = "A";
// Pick your pin (hole or no hole)
var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
var labelOriginHole = new google.maps.Point(12,15);
var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
var labelOriginFilled = new google.maps.Point(12,9);
var markerImage = { // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
path: pinSVGFilled,
anchor: new google.maps.Point(12,17),
fillOpacity: 1,
fillColor: pinColor,
strokeWeight: 2,
strokeColor: "white",
scale: 2,
labelOrigin: labelOriginFilled
};
var label = {
text: pinLabel,
color: "white",
fontSize: "12px",
}; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
this.marker = new google.maps.Marker({
map: map.MapObject,
//OPTIONAL: label: label,
position: this.geographicCoordinates,
icon: markerImage,
//OPTIONAL: animation: google.maps.Animation.DROP,
});
답변
개인적으로 Google Charts API에서 생성 된 아이콘은 훌륭하고 동적으로 쉽게 사용자 정의 할 수 있다고 생각합니다.
Google Maps API 3 에서 내 답변보기 -기본 (도트) 마커의 맞춤 마커 색상
답변
내가 찾은 가장 간단한 방법은 BitmapDescriptorFactory.defaultMarker ()를 사용하는 것입니다. 문서 에는 색상 설정의 예가 있습니다. 내 자신의 코드에서 :
MarkerOptions marker = new MarkerOptions()
.title(formatInfo(data))
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
.position(new LatLng(data.getLatitude(), data.getLongitude()))
답변
마커를 사용자 정의하려면 다음 온라인 도구에서이를 수행 할 수 있습니다. https://materialdesignicons.com/
귀하의 경우 https://materialdesignicons.com/icon/map-marker 에서 사용할 수 있고 온라인으로 사용자 정의 할 수 있는 맵 마커 를 원합니다 .
기본 빨간색을 파란색으로 변경하려면 http://maps.google.com/mapfiles/ms/icons/blue-dot.png 아이콘을로드하면됩니다.
이 스레드에서 언급되었습니다 : https://stackoverflow.com/a/32651327/6381715
