javascript - 如何在多个多边形上自定义信息窗口(Google map V3)

Question

我正在尝试在谷歌地图 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在此但 map 未显示。

Answer 1

如果您想自定义InfoWindow的完整内容，一种选择是使用第三方 InfoWindow 替代品，例如 InfoBox

proof of concept fiddle (from your example)

代码片段:

var map;
var ib;

function initMap() {
  map = new google.maps.Map(document.getElementById('assets-map'), {
    zoom: 6,
    center: {
      lat: 20.3344,
      lng: 94.8133
    },
    scrollwheel: false,
    mapTypeId: 'roadmap',
    styles: mapStyle
  });

  var mannField = new google.maps.Polygon({
    paths: mannFieldCoords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  mannField.setMap(map);
  polygonClickHandler(mannField, '<div id="iw_container" class="gw_style_iw" >' +
    '<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>');

  var a6 = new google.maps.Polygon({
    paths: a6Coords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  a6.setMap(map);
  polygonClickHandler(a6, '<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>');

  var ior4 = new google.maps.Polygon({
    paths: ior4Coords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  ior4.setMap(map);
  polygonClickHandler(ior4, '<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>');

  var ior6 = new google.maps.Polygon({
    paths: ior6Coords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  ior6.setMap(map);
  polygonClickHandler(ior6, '<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>')
  ib = new InfoBox();
}

function polygonClickHandler(polygon, contentString) {
  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #bd2025; padding: 5px 10px; border-radius: 5px; font-size: 12px !important; color: #fff;";
  boxText.innerHTML = contentString;
  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      opacity: 1.0,
      width: "200px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };
  // var ib = new InfoBox(myOptions);
  polygon.addListener('click', function(evt) {
    ib.setOptions(myOptions);
    ib.setPosition(evt.latLng);
    ib.open(map);
  });

}
google.maps.event.addDomListener(window, 'load', initMap);

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 mapStyle = [{
  "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
  }]
}];

html,
body {
  height: 100%;
}
#assets-map {
  height: 100%;
  width: 100%;
}
.gm-style-iw {
  text-align: center;
  max-width: 200px;
  border-radius: 5px;
  background: #bd2025;
  padding: 5px 10px;
  color: #fff;
  top: 0 !important;
  left: 0 !important;
  font-size: 12px !important;
  a {
    color: #fff;
    margin-top: 10px;
    display: block;
  }
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="assets-map"></div>