在 Google 地图中为形状叠加层添加注释

Question

我们可以添加一些注释，一个字符串，同时使用谷歌地图API制作叠加形状吗？比如如果我在家里画一个圆圈，用注释表示圆圈内的高警戒区域，这样看到圆圈的人就会很快知道，或者我可以使用配色方案来做到这一点？拜托，如果你们有一些解决方案？

Answer 1

是的，你可以做到。

这样的事情可以通过InfoWindow类来实现，另请参阅InfoWindowOptions对象，了解您可以修改哪些选项的详细信息 并查看谷歌文档示例。

信息窗口选项对象最重要的选项是内容

类型：字符串|节点

要在信息窗口中显示的内容。这可以是HTML 元素、纯文本字符串或包含 HTML 的字符串。这 信息窗口将根据内容调整大小。设置显式 大小，将内容设置为具有该大小的 HTML 元素。

因此，让我们来看看InfoWindow是如何显示的：

• 初始化地图(新的google.maps.Map(
• 初始化信息窗口
• 使用open()方法打开信息窗口

如果要画一个圆，可以使用Circle 类，另请参阅CircleOptions 对象以查看可以调整的选项。在地图上画圆很容易 - 你只需要实例化一个圆(new google.maps.Circle( 并在选项对象中传递地图。

检查以下演示代码，如果不清楚，请告诉我。

function init() {
var center = new google.maps.LatLng(33.53625, -111.92674);
var contentString = '<div id="content">' +
'<div id="bodyContent">' +
'<p>Beware this is my home :)</p>' +
'</div>' +
'</div>';
/*-------------------
MAP
-------------------*/
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 13,
scrollwheel: false
});
/*-------------------
CIRCLE
-------------------*/
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.4,
map: map,
center: center,
radius: 200
});
/*-------------------
INFO WINDOW
-------------------*/
var infoWindowIsOpen = true;
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: center
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
infoWindowIsOpen = false;
togglePopupButton.innerHTML = "Show Popup"
});
infowindow.open(map);
/*-------------------
TOGGLE INFO WINDOW BUTTON
-------------------*/
var togglePopupButton = document.getElementById('togglePopup');
togglePopupButton.addEventListener('click', function() {
infoWindowIsOpen = !infoWindowIsOpen;
if (infoWindowIsOpen) {
infowindow.open(map);
togglePopupButton.innerHTML = 'Hide Popup';
} else {
infowindow.close();
togglePopupButton.innerHTML = 'Show Popup';
}
});
}

.as-console-wrapper{
display:none !important;
}

<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&callback=init"></script>
<div id="map" style="width:400px;height:150px;float:left"></div>
<button id="togglePopup" style="float:left">Hide Popup</button>