Question

我们可以添加一些音符，一个字符串，同时使用谷歌地图API制作叠加形状吗？喜欢如果我在我的家周围绘制一个圆圈以指示圆圈内的高警戒区域并注明它，那么看到圆圈的人会很快知道，或者我可以只使用配色方案来做到这一点？如果你们有一些解决方案，请你好吗？

Answer 1

是的，你可以做到。

使用InfoWindow class可以实现这一目标，另请参阅InfoWindowOptions object了解您可以修改哪些选项的详细信息并查看Google文档sample。

InfoWindowOptions object最重要的选项是内容

类型：字符串|节点

要在InfoWindow中显示的内容。这可以    HTML元素，纯文本字符串或包含HTML的字符串。该   InfoWindow将根据内容进行调整。设置一个明确的   内容的大小，将内容设置为具有该大小的HTML元素。

让我们看一下InfoWindow的显示方式：

初始化地图（new google.maps.Map）
初始化InfoWindow
使用open()方法

InfoWindow

如果您想绘制圆圈，可以使用Circle class，另请参阅CircleOptions object以查看可以调整的选项。在地图上绘制圆圈很容易 - 您只需要实例化一个圆圈（new google.maps.Circle）并在选项对象中传递地图。

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

＆＃13;

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';
    }
  });

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: