홈>
Google지도 버전 3 API 및 Google지도 마커를 사용하고 있습니다. 마커가 서로 가까워지면 라벨이 겹치며 불량 해 보입니다. 마커 레이블에 배경색을 주려고했지만 Google지도 마커 레이블에 배경색 속성이없는 것 같습니다. MarkerWithLabel API를 사용해 보았지만 Google지도 귀찮은 Marker Label과 비교할 때 1000 개의 마커가 있으면 렌더링 속도가 느려졌습니다. 나는 js 바이올린을 포함시켰다. 누구든지 도와주세요?
https://jsfiddle.net/dcvc99qz/12/
function initMap() {
var pointA = new google.maps.LatLng(51.2750, 1.0870),
pointB = new google.maps.LatLng(51.2750, 0.8140),
myOptions = {
zoom: 5,
center: pointA,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "AA",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "BB",
map: map
});
}
initMap();
- 답변 # 1
관련 자료
- javascript - Google Maps API JSFIDDLE 5 개의 마커가 필요할 때 표시되는 마커 1 개
- Flutter는 캔버스에서 Google지도 사용자 지정 마커를 만듭니다
- android - Google지도에서 두 가지 유형의 마커를 추가하는 방법
- Google Maps API v3 다중 마커 맞춤 이미지?
- javascript - Google지도에서 마커를 클릭하면 팝업 정보가 표시됩니다
- java - 내가 배치 한 각 Google 맵 마커마다 다른 리사이클 러보기 활동을 여는 방법
- 각도 구글지도에서 마커 객체를 클릭하지 않고 얻는 방법
- javascript - Google지도 마커 클릭 가능 영역이 너무 큼
- optimization - 구글 Or- 툴의 이론적 배경
- swift - iOS에서 Firebase 데이터 사용 및 Google Maps API 마커 만들기
- Google maps 마커가 오류 chartapisgooglecom/chart 502와 함께 표시되지 않습니다
- How to remove markers using marker.setMap(null) from google maps API - google maps api에서 markersetmap (null)을 사용하여 마커를 제거하는 방법
- reactjs - lat lng로 마커를 추가 한 Google Maps React
- 구글 맵 안드로이드에서 캡처 된 다각형 영역에 마커를 추가하는 방법
- javascript - 지오 코더를 사용하는 동안 여러 개의 마커를 추가하여 Google지도에 반응
- pdf는 Google 슬라이드에서 생성되지만 마커가 채워져 있습니다 (GAS를 통해)
- vue.js - 사용자가 텍스트 상자에 다른 장소 이름을 다시 입력 할 때 특정 마커 양식 Google 맵을 제거하는 방법
- javascript - 웹에서 XML을 구문 분석하고 Google지도 API에 여러 마커를 추가하십시오
- javascript - Google 맵 마커를 지우는 방법은 무엇입니까?
- Flutter에서 Google지도에서 특정 마커를 제거하는 방법은 무엇입니까?
관련 질문
- flutter : 방향을 누를 때 Google지도가 설치되거나 비활성화 된 메시지가 아닙니다.
- javascript : Listener와 Google지도 마커 아이콘을 업데이트하십시오
- Google지도 API에서 국가 테두리와 해안선을 스타일링 할 수 있습니까?
- Google지도 사용자 정의 레이블 x 및 y 위치
- javascript : Google지도 API v3을 사용하는 폴리 라인에서 이동 마커
- Polyline (Route)과 Google지도 API V3의 마커 사이의 거리를 계산하십시오.
- javascript : Google지도에서 여러 마커가있는 자동 센터지도 API v3
- angular : AGM지도에서 경계 및 확대 /축소 수준을 설정하는 방법이 있습니까?
- javascript : GOOGLE MAPS API 클러스터에서 tabindex 속성 제거/설정
- Google지도를위한 고객 마커 만들기
마커는 이미지 일 뿐이며 배경색 만 변경할 수 없으며 새 아이콘을 정의해야합니다. 먼저 올바른 색상으로 새로운 투명 이미지를 준비하십시오. 그런 다음 새 아이콘 정의를 만드십시오.
아이콘 속성 문서
새 마커를 추가 할 때 아이콘을 정의 된 아이콘 중 하나로 설정하십시오.
점이 서로 가까이 있으면 텍스트 레이블이 겹치는 것을 알 수 있습니다. 수정하려면
zIndex
를 늘리십시오. 모든 마커에.전체 작업 예 : jsfiddle.net/yLhbxnz6/