如何在谷歌地图v3中添加值 [英] How to add values in google map v3
问题描述
我在谷歌搜索,但我无法得到它。我需要这种类型的值在标记中
我尝试了一些,但没有得到结果。
var locations = [
[33.906896,-6.263123,20],
[34.053993,-6.792237,30],
[33.994469,-6.848702,40],
[33.587596,-7.657156,50],
[33.531808,-7.674601,8],
[33.58824,-7.673278,12],
[33.542325,-7.578557,15]
];
var mapOptions = {
zoom:4,
center:new google.maps.LatLng(28.975750,10.669184),
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var marker,i;
for(i = 0; i< locations.length; i ++){
marker = new google.maps.Marker({
position:new google.maps.LatLng(locations [i ]
icon:'icon.png'+ locations [i] [2]
map:map
});
你不能那样做。
如上所述,这是一个粗略的演示,展示了这种技术。我相信有很多例子用箭头等绘制画布,或者你可以自己轻松地做到这一点。我的图形技能并不好:)
I have searched in google but i couldn't get it. I need this type where values to be in markers
I tried something but i didn't get the result
var locations = [
[33.906896, -6.263123, 20],
[34.053993, -6.792237, 30],
[33.994469, -6.848702, 40],
[33.587596, -7.657156, 50],
[33.531808, -7.674601, 8],
[33.58824, -7.673278, 12],
[33.542325, -7.578557, 15]
];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(28.975750, 10.669184),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: 'icon.png' + locations[i][2]
map: map
});
}
You cannot do that. A marker with label can only show 1 character. But you can create the marker icon on the fly in code. Here is a rough example :
function createMarker(width, height, title) {
var canvas, context, radius = 4;
canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
context = canvas.getContext("2d");
context.clearRect(0, 0, width, height);
context.fillStyle = "rgb(0,191,255)";
context.strokeStyle = "rgb(0,0,0)";
context.beginPath();
context.moveTo(radius, 0);
context.lineTo(width - radius, 0);
context.quadraticCurveTo(width, 0, width, radius);
context.lineTo(width, height - radius);
context.quadraticCurveTo(width, height, width - radius, height);
context.lineTo(radius, height);
context.quadraticCurveTo(0, height, 0, height - radius);
context.lineTo(0, radius);
context.quadraticCurveTo(0, 0, radius, 0);
context.closePath();
context.fill();
context.stroke();
context.font = "bold 10pt Arial"
context.textAlign = "center";
context.fillStyle = "rgb(255,255,255)";
context.fillText(title, 15, 15);
return canvas.toDataURL();
}
and when you place the markers :
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: createMarker(30, 20, '$' + locations[i][2].toString()),
map: map,
});
}
demo -> http://jsfiddle.net/cfbh9va8/
As said this is a rough demonstration, showing the technique. I am sure there is a lot of examples drawing a canvas with arrow and so on, or perhaps you can easily do this yourself. My graphical skills are not that good :)
这篇关于如何在谷歌地图v3中添加值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!