將註釋添加到Google地圖中的形狀疊加

Question

使用Google Maps API製作疊加形狀時，我們可以添加一些註釋，一個字符串嗎？就好像如果我在家裏畫一個圓圈來指示圓圈內的高度警戒區域並附上一個註釋，那麼看到這個圓圈的人會很快知道，或者我可以只使用配色方案來做到這一點？請問，如果你們有一些解決方案？

Answer 1

是的，你可以做到這一點。

這樣的事情可以用InfoWindow class來實現，也見InfoWindowOptions object有關細節什麼辦法可以修改 ，並檢查了谷歌文檔sample。

的InfoWindowOptions object的最重要的選項是內容

類型：string |節點

內容在信息窗口中顯示。這可以是 和HTML元素，明文文本字符串或包含HTML的字符串。 InfoWindow的大小將根據內容而定。要爲內容設置明確的 大小，請將內容設置爲具有該大小的HTML元素。

因此，讓我們對如何顯示InfoWindow一看：

• 初始化地圖（new google.maps.Map）
• 初始化InfoWindow
• 打開InfoWindow與open()方法

如果你想繪製一個圓，你可以使用Circle class，另請參閱CircleOptions object以查看可以調整的選項。在地圖上繪製圓圈很容易 - 您只需要實例化一個圓（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'; 
 
    } 
 
    }); 
 

 
}

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