【发布时间】：2016-10-28 18:10:32
【问题描述】：
我正在尝试在 google map api 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，但地图未显示。
【问题讨论】：
-
信息窗口就是信息窗口。如果您想完全设置样式，则应使用第三方替代品，例如 InfoBox 或 InfoBubble
-
我在 Infobox 上做了一些挖掘，但我无法让它工作。
-
那可能是一个更好的问题。尽管在 SO 及其文档中有工作示例。
标签： javascript google-maps-api-3