将注释添加到Google地图中的形状叠加层 [英] Adding notes to Shapes overlay in Google Maps

问题描述

我们可以添加一些笔记，一个字符串，同时使用Google地图API制作覆盖图形状吗？就好像如果我在家里画一个圆圈来指示圆圈内的高度警戒区域并附上一个注释，那么看到这个圆圈的人会很快知道，或者我可以只使用配色方案来做到这一点？请问，如果你们有一些解决方案？

解决方案

是的，您可以做到。

使用 InfoWindow类 ，另请参阅 InfoWindowOptions对象 关于详细信息您可以修改
的哪些选项，并检查Google文档 sample 。

InfoWindowOptions对象 为内容

类型：字符串|节点

要显示在InfoWindow中的内容。这可以是
， HTML元素，纯文本字符串或包含HTML的字符串。
InfoWindow的大小将根据内容而定。要为内容设置明确的
大小，请将内容设置为具有该大小的HTML元素。

看看如何显示 InfoWindow ：

• 初始化映射（ new google.maps.Map ）


• 初始化 InfoWindow


• 打开 InfoWindow 与 open（）方法

如果你想绘制一个圆圈，你可以使用 圈子类 ，另请参阅 CircleOptions对象 查看您可以调整的选项。在地图上绘制圆圈很简单 - 您只需要实例化一个圆圈（ new google.maps.Circle ），然后将该地图传递给选项对象。

检查下面的演示代码，并告诉我是否有不清楚的地方。
$ b

  function init（）{var center = new google.maps.LatLng（33.53625，-111.92674）; var contentString ='< div id =content>'+'< div id =bodyContent>'+'< p>请注意这是我的家：）< / 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（地图）; / * ------------------- 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 / javascriptsrc =https://maps.google.com/maps/api/js?sensor=false&callback=init>< / script>< div id =mapstyle =width：400px; height：150px; float：left>< / div>< button id =togglePopupstyle =float：left>隐藏弹出式菜单< / button>

Can we add some notes, a string, while making overlay shapes with google maps API? Like If I draw a circle around my home to indicate High alert area within circle with a note on it, so a person seeing the circle will know quickly, or can I just use color scheme to do this? Please, if you guys have some solution?

解决方案

Yes you can do it.

Such a thing could be achieved with InfoWindow class, see also InfoWindowOptions object about details what options you can modify and also check the google documentation sample.

The most important option of the InfoWindowOptions object is content

Type: string|Node

Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The InfoWindow will be sized according to the content. To set an explicit size for the content, set content to be a HTML element with that size.

So let's have a look on how InfoWindow is displayed:

• Initialize map (new google.maps.Map)
• Initialize InfoWindow
• Open the InfoWindow with the open() method

If you want to draw a circle you can use Circle class , see also CircleOptions object to see what options you can adjust. It is easy to draw circles on the map - you just need to instantiate a circle(new google.maps.Circle) and pass the map in the options object.

Check the following demo code and let me know if something is not clear.

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>

这篇关于将注释添加到Google地图中的形状叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！