Google지도 마커의 색상을 어떻게 변경할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/2472957

  •  20-09-2019
  •  | 
  •  

문제

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지도 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지도 v3의 라이브러리

V2가 언젠가 V3로 대체 되었으므로이 답변을 업데이트해야한다고 생각했습니다. V3 유틸리티 라이브러리에서 찾을 수있는 맞춤형 마커를위한 라이브러리를 만들었습니다. 여기. 다른 색상과 모양을 허용하며 마커에 텍스트를 배치 할 수 있습니다. Google 맵 유형 마커를 생성하는 방법이있는 Google 차트 API를 사용하여 작동합니다. Google 차트 API를 직접 사용하려면 소스 코드를 자유롭게 살펴보십시오.

그러나 해당 라이브러리에 대한 점은이 마커 이미지의 클릭 가능한 영역을 정의하는 데 처리해야한다는 것입니다. 예를 들어 텍스트가 더 길면 클릭 가능한 영역이 예상되는 클릭 가능한 영역이 있습니다. 이 예.

enter image description here enter image description here재료 디자인

2019 년 3 월 편집 이제 프로그래밍 방식의 핀 색상으로

순수한 JavaScript, 이미지 없음은 레이블을 지원합니다

더 이상 감가 상각 차트 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 차트 API에 의해 생성 된 아이콘이 멋지게 보이고 동적으로 쉽게 사용자 정의 할 수 있다고 생각합니다.

내 대답을 참조하십시오 Google 매핑 API 3- 기본값 (DOT) 마커에 대한 사용자 정의 마커 색상

내가 찾은 가장 간단한 방법은 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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top