Javascript 谷歌地图：在标记中放置编号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2890670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps: place number in marker?
提问by User
How can I display a number in the marker on a google map? I want to do server side clustering and I need to display how many points the cluster represents.
如何在谷歌地图的标记中显示数字？我想做服务器端集群，我需要显示集群代表多少点。
回答by Jerome Jaglale
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000'
Looks fine with 1-digit and 2-digit numbers
1 位和 2 位数字看起来不错
(from Mauro's link)
（来自毛罗的链接）
回答by Concept211
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
以下是具有更新的“视觉刷新”样式的自定义图标，您可以通过简单的 .vbs 脚本快速生成这些图标。我还包含了一个大型预生成集，您可以立即使用多种颜色选项：https: //github.com/Concept211/Google-Maps-Markers
Use the following format when linking to the GitHub-hosted image files:
链接到 GitHub 托管的图像文件时使用以下格式：
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_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_blue2.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png
回答by Estev?o Lucas
Instead of use the default solution (http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000), you can create these images as you wish, using JavaScript without any server-side code.
无需使用默认解决方案 ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000)，您可以根据需要使用 JavaScript 创建这些图像，无需任何服务器端代码。
Google google.maps.Marker accepts Base64 for its icon property. With this we can create a valid Base64 from a SVG.
Google google.maps.Marker 接受 Base64 作为其图标属性。有了这个，我们可以从 SVG 创建一个有效的 Base64。
You can see the code to produce the same as this image in this Plunker: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview
您可以在此 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>In this demo I create the SVG using D3.js, then transformed SVG to Canvas, so I can resize the image as I want and after that I get Base64 using canvas' toDataURL method.
在这个演示中，我使用 D3.js 创建了 SVG，然后将 SVG 转换为 Canvas，因此我可以根据需要调整图像大小，然后使用 canvas 的 toDataURL 方法获得 Base64。
All this demo was based on my fellow @thiago-mata's code. Kudos for him.
所有这些演示都基于我的同事@thiago-mata的代码。为他点赞。
回答by Valery Viktorovsky
Latest google js API has google.maps.MarkerLabelobject.
最新的 google js API 有google.maps.MarkerLabel对象。
So you can easily set text/styles for labels
因此您可以轻松地为标签设置文本/样式
var mIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: '#fff',
strokeOpacity: 1,
strokeWeight: 1,
strokeColor: '#333',
scale: 12
};
var gMarker = new google.maps.Marker({
map: gmap,
position: latLng,
title: 'Number 123',
icon: mIcon,
label: {color: '#000', fontSize: '12px', fontWeight: '600',
text: '123'}
});
回答by Mauro
Just found this tutorial: http://biostall.com/adding-number-or-letters-to-google-maps-api-markers
刚刚找到本教程：http: //biostall.com/adding-number-or-letters-to-google-maps-api-markers
It doesn't look like the best solution, but it does work.
它看起来不是最好的解决方案，但它确实有效。
回答by Sameh Deabes
You can use labels over markers, here is a tutorial about GIcon.label.
您可以在标记上使用标签，这是关于 GIcon.label 的教程。
You can also use GMarker.openInfoWindow.
您还可以使用GMarker.openInfoWindow。
Tip: This is the best tutorialI found about google maps api (of course after Official documentation)
回答by Jules Colle
Simplest solution:
最简单的解决方案：
marker = new google.maps.Marker({
position: my_position,
map: map,
label: num_events+'' //Needs to be a string. No integers allowed
});
See https://developers.google.com/maps/documentation/javascript/examples/marker-labels
请参阅https://developers.google.com/maps/documentation/javascript/examples/marker-labels
For more control over the layout of the marker see Valery Viktorovsky's answer
有关对标记布局的更多控制，请参阅Valery Viktorovsky 的回答
回答by Selva Raj
while creating marker use the
<script>
var marker = new google.maps.Marker({
position: myLanLat,
icon:'icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',
map: map,
});
<script>
回答by user2611053
The link above ('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000') can't be used via SSL. To generate and store the number images locally:
上面的链接 (' http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000') 不能通过 SSL 使用。在本地生成和存储数字图像：
for i in {1..99}; do curl -o ./${i}_map_icon.png "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${i}|FE6256|000000"; echo $i; done
回答by Sachin CR
<hr/>
1. add Google maps script To _Layout page.<br/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script >
<hr/>
2. Add script to your view page.
<script type="text/javascript" ><br/>
var mapLocation = [['Lucknow', 26.74561, 80.859375],<br/>
['New Delhi', 28.613459, 77.695313],<br/>
['Jaipur', 26.980829, 75.849609],<br/>
['Ahmedabad', 22.674847, 72.333984],<br/>
['Mumbai', 18.760713, 73.015135]];<br/>
$(document).ready(function () { initialize(); });
//At view initialize load default map
//在视图初始化加载默认地图
function initialize() {<br/>
var latLng = new google.maps.LatLng(22.917923, 76.992188);<br/>
var myOptions = { center: latLng, zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};<br/>
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarker(map, mapLocation);
}
function setMarker(map, mapLoc) {
for (i = 0; i < mapLoc.length; i++) {
var loca = mapLoc[i];
var myLanLat = new google.maps.LatLng(loca[1], loca[2]);
var marker = new google.maps.Marker({
position: myLanLat,
icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ ( i + 1) +'|FF776B|000000',
shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow',
map: map,
tittle: loca[0],
zIndex: loca[3]
});
}
}
