다음 jsFiddle 코드가 있습니다.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882,131.044922),
map: map,
title:"Hello World!",
icon: CanvasCrear("hola", 15)
});
마커가 다음 jsFiddle 과 같이 보이도록 노력하고 있습니다.
function CanvasCrear(texto, height_) {
var canvas = document.createElement("canvas");
var context;
var txtWidth;
txtWidth = canvas.getContext("2d");
txtWidth.font = "12px Sans-Serif";
var width_ = txtWidth.measureText(texto).width;//Calculando el width de la letra
//canvas.style.border = "thin solid black";
canvas.setAttribute("width", (width_ + "px"));
canvas.setAttribute("height", (height_ +"px"));
context = canvas.getContext("2d");
context.font = "12px Sans-Serif";
context.fillStyle = "black";
context.fillText(texto, 0, 12);
document.body.appendChild(canvas);
}
window.onload = function() {
var texto = " " + "hola mundo" + " ";
var height = 15;
CanvasCrear(texto, height);
};
나는 캔버스에 대한 전문가는 아니지만 적응하기 위해 최선을 다했지만 어떻게 해야할지 모르겠다. 어떤 아이디어?
나는 당신을 추가하는 제안 canvas
A를 CustomMarker
function CustomMarker(latlng, map, text) {
this.latlng_ = latlng;
this.text_ = text;
// Once the LatLng and text are set, add the overlay to the map. This will
// trigger a call to panes_changed which should in turn call draw.
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
// Check if the div has been created.
var div = this.div_;
if (!div) {
// Create a overlay text DIV
div = this.div_ = document.createElement('DIV');
// Create the DIV representing our CustomMarker
div.style.border = "none";
div.style.position = "absolute";
div.style.paddingLeft = "0px";
div.style.cursor = 'pointer';
CanvasCrear(this.text_, 15,div)
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(me, "click");
});
// Then add the overlay to the DOM
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
// Position the overlay
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.remove = function() {
// Check if the overlay was on the map and needs to be removed.
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
코드 스 니펫 :
function CanvasCrear(texto, height_, div) {
var context;
var canvas = document.createElement("canvas");
canvas.style.cssText = 'color: Black; background: #ffffff; background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI0NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffb442)); background: -webkit-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -o-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -ms-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: linear-gradient(to bottom, #ffffff 0%, #ffb442 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffb442", GradientType=0); border-width: 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family:"Lucida Grande", "Arial", sans-serif; pointer-events: none;';
var txtWidth;
txtWidth = canvas.getContext("2d");
txtWidth.font = "12px Sans-Serif";
var width_ = txtWidth.measureText(texto).width; //Calculando el width de la letra
console.log(width_);
//canvas.style.border = "thin solid black";
canvas.setAttribute("width", (width_ + "px"));
canvas.setAttribute("height", (height_ + "px"));
context = canvas.getContext("2d");
context.font = "12px Sans-Serif";
context.fillStyle = "black";
context.fillText(texto, 0, 12);
return div.appendChild(canvas);
}
// example
var map;
var overlay;
function initialize() {
var opts = {
zoom: 9,
center: new google.maps.LatLng(-34.397, 151.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
overlay = new CustomMarker(new google.maps.LatLng(-34.345, 151.65), map, "hola");
var overlay2 = new CustomMarker(new google.maps.LatLng(-34.395, 151.644), map, "hello");
}
google.maps.event.addDomListener(window, "load", function() {
initialize();
});
function CustomMarker(latlng, map, text) {
this.latlng_ = latlng;
this.text_ = text;
// Once the LatLng and text are set, add the overlay to the map. This will
// trigger a call to panes_changed which should in turn call draw.
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
// Check if the div has been created.
var div = this.div_;
if (!div) {
// Create a overlay text DIV
div = this.div_ = document.createElement('DIV');
// Create the DIV representing our CustomMarker
div.style.border = "none";
div.style.position = "absolute";
div.style.paddingLeft = "0px";
div.style.cursor = 'pointer';
CanvasCrear(this.text_, 15, div)
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(me, "click");
});
// Then add the overlay to the DOM
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
// Position the overlay
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.remove = function() {
// Check if the overlay was on the map and needs to be removed.
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
function addOverlay() {
overlay.setMap(map);
}
function removeOverlay() {
overlay.setMap(null);
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
#map_canvas {
width: 100%;
height: 100%;
}
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas" width="300" height="200"></div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다