问题描述
我想在地图上的某些地方贴上自己的自定义标签,例如下面的图片,其中有阿尔伯特公园湖的文字,但与地方标记无关。这是我要设计具有多个区域的应用程序时想要做的一个例子,我想将这些区域的名称放在地图上,这些区域的名称仅在特定缩放级别下可见,以确保存在用户查看时不会混乱。我曾尝试过位置标记,但发现标记上方的文本外观不好,因此我不得不编写一个功能来调整缩放级别的文本可见性,以处理屏幕上许多内容的混乱情况。一次。
为乔丹·史密斯打气
解决方法
我建议将您要设置的文本转换为位图图像并将此位图设置为自定义标记,如果您想知道如何将文本转换为位图,可能会发现此question很有用。
,您可以尝试以下操作:
1。弹出多个信息窗口:https://jsfiddle.net/kjqfs0bo/
function initMap() {
const uluru = { lat: -25.363,lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"),{
zoom: 4,center: uluru,});
const contentString ="lalala";
const infowindow = new google.maps.InfoWindow({
content: contentString,});
const infowindow2 = new google.maps.InfoWindow({
content: contentString,});
const marker = new google.maps.Marker({
position: uluru,map,title: "Uluru (Ayers Rock)",});
const marker2 = new google.maps.Marker({
position: { lat: -20.363,lng: 130.044 },});
infowindow.open(map,marker);
infowindow2.open(map,marker2);
}
2。带有文本标签的不可见标记:https://jsfiddle.net/0koynbz2/1/
function createMarker() {
var canvas,context;
canvas = document.createElement("canvas");
return canvas.toDataURL();
}
var map = new google.maps.Map(document.getElementById("map_canvas"),{
zoom: 13,center: new google.maps.LatLng(56.1304,-106.3468),mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.1304,map: map,icon: {
url: createMarker()
},label: {
text: 'My Place',color: '#000',fontSize: '14px',fontWeight: 'bold'
}
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(56.1204,label: {
text: 'My Place2',fontWeight: 'bold'
}
});