나는 이것과 비슷한 다른 많은 질문 ( here , here 및 here )을 보았지만 모두 내 문제를 해결하지 못하는 대답을 받아 들였습니다. 내가 찾은 가장 좋은 해결책은 StyledMarker 라이브러리입니다.이 라이브러리는 마커의 사용자 정의 색상을 정의 할 수 있지만 기본 마커 (Google 맵 검색을 할 때 얻는 것)를 사용할 수는 없습니다. 중간에 점), 그것은 마커를 문자 또는 특별한 아이콘으로 제공하는 것 같습니다.
답변
URL 을 사용하여 Google 차트 API 에서 아이콘 이미지를 동적으로 요청할 수 있습니다 .
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569
이와 같은 어느 같습니다 
화상은 21×34 픽셀 핀 팁 위치에 (10, 34)
또한 별도의 그림자 이미지를 원할 것입니다 (근처 아이콘과 겹치지 않도록).
http://chart.apis.google.com/chart?chst=d_map_pin_shadow
이와 같은 어느 같습니다 
화상은 40×37 픽셀 핀 팁 위치에 (12, 35)
MarkerImage 를 구성 할 때 이에 따라 크기와 기준점을 설정해야합니다.
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
그런 다음 다음을 사용하여 마커를지도에 추가 할 수 있습니다.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
icon: pinImage,
shadow: pinShadow
});
“FE7569″를 원하는 색상 코드로 바꾸십시오. 예 :
영감을 얻은 Jack B Nimble의 신용 😉
답변
Google Maps API v3을 사용하는 경우 setIcon예를 들어
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
또는 마커 초기화의 일부로 :
marker = new google.maps.Marker({
icon: 'http://...'
});
다른 색상 :
다음 코드를 사용하여 다른 색상으로 기본 마커를 업데이트하십시오.
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
답변
다음은 Gooogle Maps API 자체를 사용하는 훌륭한 솔루션입니다. 외부 서비스가 없으며 추가 라이브러리가 없습니다. 또한 맞춤형 모양과 다양한 색상과 스타일을 지원합니다. 이 솔루션은 벡터 맵을 사용하는데,이 API는 googlemaps api 호출 Symbols 입니다.
미리 정의 된 소수의 제한된 기호 외에도 SVG 경로 문자열 ( Spec ) 을 지정하여 모든 모양의 색상을 만들 수 있습니다 .
이를 사용하려면 ‘icon’표식 옵션을 이미지 URL로 설정하는 대신 기호 옵션이 포함 된 사전으로 설정하십시오. 예를 들어, 표준 마커와 매우 유사한 하나의 심볼을 만들었습니다.
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
};
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: pinSymbol("#FFF"),
});
형상 키 포인트를 0,0으로 유지하려면 마커 아이콘 중심 매개 변수를 정의하지 않아도됩니다. 다른 경로 예, 점이없는 동일한 마커 :
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
그리고 여기에 매우 간단하고 못생긴 색의 깃발이 있습니다.
path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',
Inkscape (GNU-GPL, 멀티 플랫폼) 와 같은 시각적 도구를 사용하여 경로를 만들 수도 있습니다 . 유용한 힌트 :
- Google API는 단일 경로 만 허용하므로 다른 객체 (정사각형, cercle …)를 경로로 바꿔 단일 경로로 결합해야합니다. 경로 메뉴의 두 명령
- 경로를 (0,0)으로 이동하려면 경로 편집 모드 (F2)로 이동하여 모든 제어 노드를 선택하고 드래그하십시오. F1으로 객체를 이동해도 경로 노드 좌표는 변경되지 않습니다.
- 참조 점이 (0,0)에 있도록하기 위해 참조 점을 단독으로 선택하고 상단 도구 모음에서 직접 좌표를 편집 할 수 있습니다.
- XML 인 SVG 파일을 저장 한 후 편집기로 파일을 열고 svg : path 요소를 찾아 ‘d’속성의 내용을 복사하십시오.
답변
그럼 내가 StyledMarker으로 얻을 수 있었던 가장 가까운 것입니다 이 입니다.
가운데의 글 머리 기호는 기본 글 머리 기호만큼 크지 않습니다. StyledMarker 클래스는 단순히이 URL을 빌드하고 Google API에 마커를 만들도록 요청합니다. .
로부터 클래스 사용 예제 사용 “% E2 %의 80 % A2” 와 같이 텍스트로 :
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
라인을 주석 처리하려면 StyledMarker.js를 수정해야합니다.
if (text_) {
text_ = text_.substr(0,2);
}
텍스트 문자열을 2 자로 자릅니다.
또는 원하는 색상으로 기본 이미지를 기반으로 사용자 정의 마커 이미지를 만들고 다음과 같은 코드로 기본 마커를 재정의 할 수 있습니다.
marker = new google.maps.Marker({
map:map,
position: latlng,
icon: new google.maps.MarkerImage(
'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0, 0),
new google.maps.Point(0, 24)
)
});
답변
vokimon의 답변 을 약간 확장 하여 다른 속성을 변경하는 데 조금 더 편리합니다.
function customIcon (opts) {
return Object.assign({
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: '#34495e',
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
}, opts);
}
용법:
marker.setIcon(customIcon({
fillColor: '#fff',
strokeColor: '#000'
}));
또는 새로운 마커를 정의 할 때 :
const marker = new google.maps.Marker({
position: {
lat: ...,
lng: ...
},
icon: customIcon({
fillColor: '#2ecc71'
}),
map: map
});
답변
안녕하세요, 아이콘을 SVG로 사용하고 색상을 설정할 수 있습니다. 이 코드를 참조하십시오
/*
* declare map and places as a global variable
*/
var map;
var places = [
['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
* use google maps api built-in mechanism to attach dom events
*/
google.maps.event.addDomListener(window, "load", function () {
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map_div"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
/*
* create bounds (which will be used auto zoom map)
*/
var bounds = new google.maps.LatLngBounds();
/*
* marker creater function (acts as a closure for html parameter)
*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
bounds.extend(options.position);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
map.setZoom(map.getZoom() + 1)
map.setCenter(marker.getPosition());
});
}
return marker;
}
/*
* add markers to map
*/
for (var i = 0; i < places.length; i++) {
var point = places[i];
createMarker({
position: new google.maps.LatLng(point[2], point[3]),
map: map,
icon: {
path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
scale: 0.6,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: point[4],
fillOpacity: 0.85,
},
}, point[1]);
};
map.fitBounds(bounds);
});<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>답변
Google Maps API 버전 3.11부터 Icon객체가 대체됩니다.MarkerImage . 아이콘은 MarkerImage와 동일한 매개 변수를 지원합니다. 나는 심지어 조금 더 직설적 인 것으로 나타났습니다.
예를 들면 다음과 같습니다.
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
자세한 내용은 이 사이트를 확인하십시오
