Google Maps V3에서 번호가 매겨진지도 마커를 어떻게 만들 수 있습니까?
여러 마커가있는지도를 작업 중입니다.
이 마커는 사용자 지정 아이콘을 사용하지만 맨 위에 숫자를 추가하고 싶습니다. 이전 버전의 API를 사용하여이 작업을 수행하는 방법을 보았습니다. V3에서 어떻게 할 수 있습니까?
* 참고- "제목"속성은 마커 위에 마우스를 올려 놓으면 툴팁을 생성하지만, 마커 위에 마우스를 올려 놓지 않아도 사용자 지정 이미지 위에 겹쳐지는 것을 원합니다.
다음은 마커 클래스에 대한 문서이며 이러한 속성 중 어느 것도 도움이되지 않는 것 같습니다. http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions
불행히도 그렇게 쉽지는 않습니다. OverlayView 클래스 ( 예제 )를 기반으로 사용자 지정 마커를 만들고 카운터를 포함하여 자체 HTML을 넣을 수 있습니다. 이렇게하면 드래그하거나 그림자를 쉽게 추가 할 수없는 매우 기본적인 마커가 남게되지만 매우 사용자 지정이 가능합니다.
또는 기본 마커에 라벨을 추가 할 수 있습니다 . 이것은 덜 사용자 정의 할 수 있지만 작동합니다. 또한 표준 마커가 수행하는 모든 유용한 기능을 유지합니다.
오버레이에 대한 자세한 내용은 Google의 Fun with MVC Objects 문서에서 확인할 수 있습니다 .
편집 : JavaScript 클래스를 생성하지 않으려면 Google의 Chart API를 사용할 수 있습니다 . 예를 들면 :
번호가 매겨진 마커 :
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
텍스트 마커 :
http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo
이것은 빠르고 쉬운 경로이지만 사용자 지정이 어렵고 각 마커에 대해 클라이언트가 새 이미지를 다운로드해야합니다.
V3에서 수행하는 방법 :
먼저 Google지도 API를 initialize()로드 하고 콜백 메서드 내에서 여기 에서 찾은 MarkerWithLabel.js 를 로드 합니다 .
function initialize() {
$.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(currentLat, currentLng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('mapholder'),
mapOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mapData.length; i++) {
createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
extendBounds(bounds, mapData[i]);
}
map.fitBounds(bounds);
var maximumZoomLevel = 16;
var minimumZoomLevel = 11;
var ourZoom = defaultZoomLevel; // default zoom level
var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
if (this.getZoom(map.getBounds) > 16) {
this.setZoom(maximumZoomLevel);
}
google.maps.event.removeListener(blistener);
});
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
그런 다음 다음을 사용하여 마커를 만듭니다 createMarker().
function createMarker(number, currentMap, currentMapData) {
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
map: currentMap,
icon: '/img/sticker/empty.png',
shadow: '/img/sticker/bubble_shadow.png',
transparent: '/img/sticker/bubble_transparent.png',
draggable: false,
raiseOnDrag: false,
labelContent: ""+number,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "mapIconLabel", // the CSS class for the label
labelInBackground: false
});
}
마커 에 mapIconLabel 클래스를 추가 했으므로 CSS에 몇 가지 CSS 규칙을 추가 할 수 있습니다.
.mapIconLabel {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
font-family: 'DINNextRoundedLTProMediumRegular';
}
결과는 다음과 같습니다.
답변에 대해 논평 할만한 평판이 충분하지 않지만 Google Chart API가 더 이상 사용되지 않는다는 점에 주목하고 싶습니다.
로부터 API 홈페이지 :
Google 차트 도구의 인포 그래픽 부분은 2012 년 4 월 20 일부터 공식적으로 지원이 중단되었습니다.
이 사이트에서 제공하는 소스에서 번호가 매겨진 아이콘 세트를 다운로드 할 수 있습니다.
그러면 다음을 수행 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Demo</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
for (var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage('marker' + i + '.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="map" style="width:400px; height:500px;"></div>
</body>
</html>
위 예의 스크린 샷 :
마커 뒤에 그림자를 쉽게 추가 할 수 있습니다. 이에 대한 자세한 내용 은 Google Maps API Reference : Complex Markers 에서 예제를 확인할 수 있습니다 .
이제 매핑 문서에 추가되었으며 타사 코드가 필요하지 않습니다.
다음 두 샘플을 결합 할 수 있습니다.
https://developers.google.com/maps/documentation/javascript/examples/marker-labels
https://developers.google.com/maps/documentation/javascript/examples/icon-simple
다음과 같은 코드를 얻으려면 :
var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex],
map: map,
icon: 'image.png'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
35 개 이상의 마커가있는 경우 레이블이 첫 번째 문자 만 표시하므로이 방법은 작동하지 않습니다 (AZ 및 0-9를 사용하면 35가됩니다). 이 제한 해제를 요청하려면 이 Google지도 문제 에 투표하세요 .
@ZuzEL과 유사한 솔루션을 사용하여이 작업을 수행했습니다.
기본 솔루션 ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 ) 을 사용하는 대신 자바 스크립트를 사용하여 서버 측 코드없이 원하는대로 이러한 이미지를 만들 수 있습니다. .
Google google.maps.Marker는 아이콘 속성에 Base64를 허용합니다. 이를 통해 SVG에서 유효한 Base64를 만들 수 있습니다.
이 Plunker에서이 이미지와 동일한 코드를 생성하는 코드를 볼 수 있습니다. http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview
var markers = [
[1002, -14.2350040, -51.9252800],
[2000, -34.028249, 151.157507],
[123, 39.0119020, -98.4842460],
[50, 48.8566140, 2.3522220],
[22, 38.7755940, -9.1353670],
[12, 12.0733335, 52.8234367],
];
function initializeMaps() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 4,
center: myLatLng
});
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(point) {
generateIcon(point[0], function(src) {
var pos = new google.maps.LatLng(point[1], point[2]);
bounds.extend(pos);
new google.maps.Marker({
position: pos,
map: map,
icon: src
});
});
});
map.fitBounds(bounds);
}
var generateIconCache = {};
function generateIcon(number, callback) {
if (generateIconCache[number] !== undefined) {
callback(generateIconCache[number]);
}
var fontSize = 16,
imageWidth = imageHeight = 35;
if (number >= 1000) {
fontSize = 10;
imageWidth = imageHeight = 55;
} else if (number < 1000 && number > 100) {
fontSize = 14;
imageWidth = imageHeight = 45;
}
var svg = d3.select(document.createElement('div')).append('svg')
.attr('viewBox', '0 0 54.4 54.4')
.append('g')
var circles = svg.append('circle')
.attr('cx', '27.2')
.attr('cy', '27.2')
.attr('r', '21.2')
.style('fill', '#2063C6');
var path = svg.append('path')
.attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
.attr('fill', '#FFFFFF');
var text = svg.append('text')
.attr('dx', 27)
.attr('dy', 32)
.attr('text-anchor', 'middle')
.attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
.text(number);
var svgNode = svg.node().parentNode.cloneNode(true),
image = new Image();
d3.select(svgNode).select('clippath').remove();
var xmlSource = (new XMLSerializer()).serializeToString(svgNode);
image.onload = (function(imageWidth, imageHeight) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
dataURL;
d3.select(canvas)
.attr('width', imageWidth)
.attr('height', imageHeight);
context.drawImage(image, 0, 0, imageWidth, imageHeight);
dataURL = canvas.toDataURL();
generateIconCache[number] = dataURL;
callback(dataURL);
}).bind(this, imageWidth, imageHeight);
image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
initializeMaps();#map_canvas {
width: 100%;
height: 300px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script src="script.js"></script>
</html>이 데모에서는 D3.js를 사용하여 SVG를 만든 다음 SVG를 Canvas로 변환하여 원하는대로 이미지 크기를 조정할 수 있으며 그 후에 Canvas의 toDataURL 메서드에서 Base64를 가져옵니다.
이 모든 데모는 제 동료 @ thiago-mata 코드를 기반으로했습니다 . 그를위한 명성.
이건 어때? (2015 년)
1) 사용자 지정 마커 이미지를 가져옵니다.
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
2) canvas안으로 RAM만들고이 이미지를 그립니다
imageObj.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.drawImage(imageObj, 0, 0);
}
3) 그 위에 무엇이든 쓰세요
context.font = "40px Arial";
context.fillText("54", 17, 55);
4) 캔버스에서 원시 데이터를 가져와 URL 대신 Google API에 제공
var image = {
url: canvas.toDataURL(),
};
new google.maps.Marker({
position: position,
map: map,
icon: image
});
전체 코드 :
function addComplexMarker(map, position, label, callback){
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "/markers/blank_pin.png";
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
//Adjustable parameters
context.font = "40px Arial";
context.fillText(label, 17, 55);
//End
var image = {
url: canvas.toDataURL(),
size: new google.maps.Size(80, 104),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(40, 104)
};
// the clickable region of the icon.
var shape = {
coords: [1, 1, 1, 104, 80, 104, 80 , 1],
type: 'poly'
};
var marker = new google.maps.Marker({
position: position,
map: map,
labelAnchor: new google.maps.Point(3, 30),
icon: image,
shape: shape,
zIndex: 9999
});
callback && callback(marker)
};
});
Google지도 버전 3에는 마커 라벨에 대한 기본 지원이 있습니다. 더 이상 자체 이미지를 생성하거나 타사 클래스를 구현할 필요가 없습니다. 마커 라벨
프로그래밍 기술이 있다면 레이블이 지정된 아이콘을 서버 측에서 생성하는 것이 매우 가능합니다. PHP 외에도 서버에 GD 라이브러리가 필요합니다. 몇 년 동안 잘 작동했지만 아이콘 이미지를 동기화하기가 까다로 웠습니다.
AJAX를 통해 빈 아이콘과 텍스트 및 색상, 적용 할 bgcolor를 정의하는 몇 가지 매개 변수를 전송합니다. 내 PHP는 다음과 같습니다.
header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";
function do_icon ($icon, $text, $color) {
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);
$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = 'arial.ttf';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?
imagestring($im, $p2, $px, 3, $text, $contrast); // imagestring ( $image, $font, $x, $y, $string, $color)
imagepng($im);
imagedestroy($im);
}
$icons = array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png"); // 1/9/09
$light = array( TRUE, TRUE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE); // white text?
$the_icon = $icons[$_GET['blank']]; // 0 thru 8 (note: total 9)
$the_text = substr($_GET['text'], 0, 3); // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET['blank']] );
다음과 같은 것을 통해 클라이언트 측에서 호출됩니다. var image_file = "./our_icons/gen_icon.php?blank="+ escape (icons [color]) + "& text ="+ iconStr;
이 문제를 해결하기 위해 Google Charts API 를 사용하는 방법을 보여주는 2 센트 입니다.
@ dave1010 답변을 기반으로 하지만 업데이트 된 https링크가 있습니다.
번호가 매겨진 마커 :
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000
텍스트 마커 :
https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker
google-maps-utility-library-v3에서 Marker With Label 옵션을 사용할 수 있습니다. 
https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries를 참조 하세요.
나는 그것을하는 가장 좋은 방법을 발견했다. 사용 Snap.svg는 아이콘으로 포함하는 그래픽 데이터를 생성하는)에 SVG를 생성하고 함수 toDataURL를 (사용합니다. 마커의 멋진 움직임을 제공하는 마커에 SlidingMarker 클래스를 사용합니다. Snap.svg를 사용하면 모든 종류의 그래픽을 만들 수 있으며지도가 환상적으로 보일 것입니다.
var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
position: {lat: store.lat, lng: store.lng},
map: $scope.map,
label: store.name, // you do not need this
title: store.name, // nor this
duration: 2000,
icon: s.toDataURL()
});
가장 쉬운 솔루션-SVG 사용
작동 : IE9 , IE10 , FF, Chrome, Safari
(다른 브라우저를 사용하는 경우 "코드 스 니펫 실행"및 주석 달기)
Google Maps API 외에 외부 종속성이 없습니다!
.svg 형식 의 아이콘 이 있으면 매우 쉽습니다 . 이 경우 적절한 텍스트 요소를 추가 하고 JS의 필요에 맞게 내용을 변경하십시오.
.svg코드에 다음과 같이 추가 합니다 (이것은 나중에 JS로 변경 될 텍스트 "섹션"입니다).
<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>
예 : (@ EstevãoLucas에서 부분적으로 복사)
중요 : 올바른 <text>태그 속성을 사용하십시오 . 주 text-anchor="middle" x="50%" y="28"이상 숫자 센터 (더 많은 정보 : SVG 사각형에 어떻게 장소와 센터 텍스트를 )
사용 encodeURIComponent()(이것은 아마도 IE9 및 10과의 호환성을 보장 함)
// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
// inline your SVG image with number variable
var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
// use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}
// Standard Maps API code
var markers = [
[1, -14.2350040, -51.9252800],
[2, -34.028249, 151.157507],
[3, 39.0119020, -98.4842460],
[5, 48.8566140, 2.3522220],
[9, 38.7755940, -9.1353670],
[12, 12.0733335, 52.8234367],
];
function initializeMaps() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 4,
center: myLatLng
});
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(point) {
var pos = new google.maps.LatLng(point[1], point[2]);
new google.maps.Marker({
position: pos,
map: map,
icon: getMarkerIcon(point[0]),
});
bounds.extend(pos);
});
map.fitBounds(bounds);
}
initializeMaps();#map_canvas {
width: 100%;
height: 300px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script src="script.js"></script>
</html>Google지도의 인라인 SVG에 대한 추가 정보 : https://robert.katzki.de/posts/inline-svg-as-google-maps-marker
Perhaps there are those still looking for this but finding Google Dynamic icons deprecated and other map-icon libraries just a little bit too ugly.
To add a simple marker with any number inside using a URL. In Google Drive using the Google My Maps, it creates numbered icons when using a map layer that is set to 'Sequence of Numbers' and then adding markers/points on the map.
Looking at the source code, Google has their own way of doing it through a URL:
https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=ff000000,0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=56&font=fonts/Roboto-Medium.ttf
I haven't played extensively with it but by changing the hex color codes in the 'highlight' parameter(color parameter does not change the color as you may think), the 'text' value can be set to any string and you can make a nice round icon with any number/value inside. I'm sure the other parameters may be of use too.
One caveat with this approach, who knows when Google will remove this URL from the world!
Here are custom icons with the updated "visual refresh" style that you can generate quickly via a simple .vbs script. I also included a large pre-generated set that you can use immediately with multiple color options: https://github.com/Concept211/Google-Maps-Markers
Use the following format when linking to the GitHub-hosted image files:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png
color
red, black, blue, green, grey, orange, purple, white, yellow
character
A-Z, 1-100, !, @, $, +, -, =, (%23 = #), (%25 = %), (%26 = &), (blank = •)
Examples:
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png
참고 URL : https://stackoverflow.com/questions/2436484/how-can-i-create-numbered-map-markers-in-google-maps-v3
'Nice programing' 카테고리의 다른 글
| PostgreSQL IF 문 (0) | 2020.12.10 |
|---|---|
| C ++ 기본 인수를 다른 인수로 초기화 할 수 있습니까? (0) | 2020.12.09 |
| iOS 충돌 보고서 : atos가 예상대로 작동하지 않음 (0) | 2020.12.09 |
| Dart 코드에서 호스트 플랫폼을 어떻게 감지합니까? (0) | 2020.12.09 |
| API 요청 시간 초과를 가져 오시겠습니까? (0) | 2020.12.09 |