如何像标记一样创建Google Latitude？ [英] How to create Google Latitude like markers?
问题描述
在我的HTML5应用中，我使用Google Map v3并在地图上添加了多个标记。很容易放置新标记并更改图标，但我希望能够构建像Google Latitude中使用的标记。这些标记设置了一个图标图像和一个不错的边框。
有关如何做到这一点的任何想法？
你可以做这个服务器端，或者因为你使用的是HTML 5，并且假设你有可用的画布，你可以在客户端做到这一点。以下是使用HTML 5画布进行客户端操作的一种方法。做它服务器端会根据你使用的语言而有所不同，但技术是相似的。
下载这些图片并尝试一下。图像需要与页面位于同一个域中以避免安全错误。除非您更新HTML中的位置，否则它们也应位于相同的目录中。
加载页面后，点击面孔并使用提供的框架图像创建一个随机标记并添加到Google地图。
=https://i.stack.imgur.com/0xFKX.pngalt =在这里输入图片描述> <！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; utf-8>
< title> HTML 5画布图像处理< / title>
< / head>
< body>
< img onclick =build（this）id =face1src =face1.png/>
< img onclick =build（this）id =face2src =face2.png/>
< img onclick =build（this）id =face3src =face3.png/>
< img id =framesrc =frame.png/>
< div id =map_canvasstyle =width：640px; height：480px;>
< / div>
< script type =text / javascript>
function build（caller）{
var image = getMergedUrl（document.getElementById（frame），caller）;
var myLatLng = getRndPos（map.getBounds（））;
var myMarker = new google.maps.Marker（{
position：myLatLng，
map：map，
icon：image
}）;
$ b函数getRndPos（边界）{
var xDiff = Math.abs（bounds.getNorthEast（）。lng（） - bounds.getSouthWest（）。 LNG（））;
var yDiff = Math.abs（bounds.getNorthEast（）。lat（） - bounds.getSouthWest（）。lat（））;
var xMin = Math.min（bounds.getNorthEast（）。lng（），bounds.getSouthWest（）。lng（））;
var yMin = Math.min（bounds.getNorthEast（）。lat（），bounds.getSouthWest（）。lat（））;
var x = xMin + xDiff * Math.random（）;
var y = yMin + yDiff * Math.random（）;
var pos = new google.maps.LatLng（y，x）;
返回pos;
$ b $ function getMergedUrl（frame，pic）{
//创建一个空的画布元素
var canvas = document.createElement（canvas）;
canvas.width = frame.width;
canvas.height = frame.height;
//将图像内容复制到画布
var ctx = canvas.getContext（2d）;
ctx.drawImage（frame，0，0）;
ctx.drawImage（pic，4，4）;
//获取数据URL格式的图片
var dataURL = canvas.toDataURL（image / png）;
返回dataURL;
函数initialize（）{
var myLatlng = new google.maps.LatLng（-34.397,150.644）;
var myOptions = {
zoom：8，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
函数loadScript（）{
var script = document.createElement（script）;
script.type =text / javascript;
script.src =http://maps.google.com/maps/api/js?sensor=false&callback=initialize;
document.body.appendChild（script）;
}
window.onload = loadScript;
< / script>
< / body>
< / html>
感谢 Matthew Crumley 为来自这里的toDataUrl代码。
In my HTML5 app, I use Google Map v3 and add several markers on a map. It's easy to place new markers and to change icons but I'd like to be able to build markers like the one used in Google Latitude. Those markers are set up with an icon image and a nice border.
Any ideas on how to do this ?
You could do this server-side or since you are using HTML 5 and assuming you have the canvas available you could do this on the client-side. Below is a way to do it client-side using the HTML 5 canvas. Doing it server-side will vary by what language you are using but the technique would be similar.
Download these images and try it out. The images need to reside in the same domain as the page to avoid a security error. They should also be in the same directory unless you update the locations in the HTML.
After the page loads, click the faces and a random marker will be created using the supplied frame image and added to the Google map.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8">
<title>HTML 5 Canvas Image Processing</title>
</head>
<body>
<img onclick="build(this)" id="face1" src="face1.png"/>
<img onclick="build(this)" id="face2" src="face2.png"/>
<img onclick="build(this)" id="face3" src="face3.png"/>
<img id="frame" src="frame.png"/>
<div id="map_canvas" style="width:640px;height:480px;">
</div>
<script type="text/javascript">
function build(caller){
var image = getMergedUrl(document.getElementById("frame"), caller);
var myLatLng = getRndPos(map.getBounds());
var myMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
function getRndPos(bounds) {
var xDiff = Math.abs(bounds.getNorthEast().lng() - bounds.getSouthWest().lng());
var yDiff = Math.abs(bounds.getNorthEast().lat() - bounds.getSouthWest().lat());
var xMin = Math.min(bounds.getNorthEast().lng(),bounds.getSouthWest().lng());
var yMin = Math.min(bounds.getNorthEast().lat(),bounds.getSouthWest().lat());
var x = xMin + xDiff * Math.random();
var y = yMin + yDiff * Math.random();
var pos = new google.maps.LatLng(y,x);
return pos;
}
function getMergedUrl(frame, pic){
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = frame.width;
canvas.height = frame.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(frame, 0, 0);
ctx.drawImage(pic, 4, 4);
// Get the data-URL formatted image
var dataURL = canvas.toDataURL("image/png");
return dataURL;
}
function initialize(){
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function loadScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html>
Thanks to Matthew Crumley for the toDataUrl code from here.
这篇关于如何像标记一样创建Google Latitude？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
