0
我正嘗試在Google地圖API v3上創建多個多邊形。點擊每個多邊形後，會彈出一個信息窗口（自定義）。目前我只能用信息窗口創建多邊形，但可以自定義它。如何在多個多邊形（Google Map V3）上自定義信息窗口
任何人知道如何去除白色背景和尾。我找不到那個類/ ID。
HTML
<div id="assets-map"></div>
JS
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('assets-map'), {
zoom: 7,
center: {lat: 20.3344, lng: 94.8133},
scrollwheel: false,
mapTypeId: 'roadmap',
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
});
var mannFieldCoords = [
{lat: 20.3344, lng: 94.8133},
{lat: 20.3454, lng: 94.8539},
{lat: 20.1698, lng: 94.8856},
{lat: 20.1571, lng: 94.8903},
{lat: 20.1571, lng: 94.8833},
{lat: 20.1596, lng: 94.8820},
{lat: 20.1541, lng: 94.8736},
{lat: 20.1541, lng: 94.8695},
{lat: 20.2177, lng: 94.8352}
];
var a6Coords = [
{lat: 16.7500, lng: 93.3500},
{lat: 17.5000, lng: 93.3500},
{lat: 17.5000, lng: 94.5167},
{lat: 16.7500, lng: 94.3500}
];
var ior4Coords = [
{lat: 18.8083, lng: 95.2083},
{lat: 18.8083, lng: 95.2750},
{lat: 18.3500, lng: 95.3500},
{lat: 18.3500, lng: 95.2667}
];
var ior6Coords = [
{lat: 18.1667, lng: 95.3000},
{lat: 18.2833, lng: 95.3000},
{lat: 18.2833, lng: 95.3333},
{lat: 18.1667, lng: 95.3958}
];
var mannField = new google.maps.Polygon({
paths: mannFieldCoords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
mannField.setMap(map);
mannField.addListener('click', showArraysMF);
var a6 = new google.maps.Polygon({
paths: a6Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
a6.setMap(map);
a6.addListener('click', showArraysA6);
var ior4 = new google.maps.Polygon({
paths: ior4Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
ior4.setMap(map);
ior4.addListener('click', showArraysIor4);
var ior6 = new google.maps.Polygon({
paths: ior6Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
ior6.setMap(map);
ior6.addListener('click', showArraysIor6);
infoWindow = new google.maps.InfoWindow;
}
function showArraysMF(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">Mann Field <span>(52 sq-km)</span></div>' +
'<div class="iw_content">Performance Compensation Contract since 1996, extended for 11 years until August 2024</div>' +
"<a href='mann-field.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
function showArraysA6(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">A-6 <span>(9830 sq-km)</span></div>' +
'<div class="iw_content">PSC signed in 2007, Pyi Thar-1 <strong>first gas discovery</strong> in Rakhine Foldbelt of Myanmar deepwaters</div>' +
"<a href='block-a6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
function showArraysIor4(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">IOR-4 <span>(380 sq-km)</span></div>' +
'<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
"<a href='ior-4.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
function showArraysIor6(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">IOR-6 <span>(116 sq-km)</span></div>' +
'<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
"<a href='ior-6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
我的工作的codepen例子。
我試過了tutorial這個，但是地圖沒有顯示出來。
InfoWindow是InfoWindow。如果你想完全設計它，你應該使用第三方替代品，如[InfoBox]（https://github.com/googlemaps/v3-utility-library/tree/master/infobox）或[InfoBubble]（https：/ /github.com/googlemaps/v3-utility-library/tree/master/infobubble） – geocodezip
我在Infobox上做了一些挖掘工作，但是我無法使用它。 – Leslie
這可能是一個更好的問題。雖然在SO和其文檔中都有工作示例。 – geocodezip