홈>
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지도에서 특정 마커를 제거하는 방법은 무엇입니까?
관련 질문
- Google Maps - 구글지도 - svg 마커 문제
- javascript - Google지도에서 특정 마커를 삭제하는 방법
- javascript - 여러 Google 마커가 드래그 리스너로 위치를 업데이트하지 않습니다
- google mark cluster - 특정 확대/축소 수준으로 클러스터의 모든 마커 표시
- 구글 맵을 사용하여 폴리 라인으로 좌표를 얻는 방법?
- javascript - Google지도는 XML 값을 기준으로 마커 색상을 변경합니다
- javascript - 내부 마커에 따라 마커 클러스터 아이콘 설정
- java - GMapsFX 및 FXML을 사용할 때 Google Maps API 키를 어떻게 초기화합니까?
- javascript - Google지도 마커 markersetMap (null) 함수가 아님
- javascript - Google Maps API V3에서 다량의 마커 사용 및 사용 중지
마커는 이미지 일 뿐이며 배경색 만 변경할 수 없으며 새 아이콘을 정의해야합니다. 먼저 올바른 색상으로 새로운 투명 이미지를 준비하십시오. 그런 다음 새 아이콘 정의를 만드십시오.
아이콘 속성 문서
새 마커를 추가 할 때 아이콘을 정의 된 아이콘 중 하나로 설정하십시오.
점이 서로 가까이 있으면 텍스트 레이블이 겹치는 것을 알 수 있습니다. 수정하려면
zIndex
를 늘리십시오. 모든 마커에.전체 작업 예 : jsfiddle.net/yLhbxnz6/