您可以在服务器端执行此操作，或者由于您使用的是 HTML 5 并且假设您有可用的画布，因此您可以在客户端执行此操作。下面是使用 HTML 5 画布在客户端执行此操作的一种方法。在服务器端执行此操作会因您使用的语言而异，但技术是相似的。
下载这些图像并尝试一下。图像需要驻留在与页面相同的域中以避免安全错误。它们也应该位于同一目录中，除非您更新 HTML 中的位置。
页面加载后，单击面孔，将使用提供的帧图像创建随机标记并将其添加到 Google 地图。
<!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>
谢谢马修·克拉姆利 https://stackoverflow.com/users/2214/matthew-crumleytoDataUrl 代码来自here https://stackoverflow.com/questions/934012/get-image-data-in-javascript/934925#934925.
