Question

我需要在google地图中使用infowindow更改样式。这是我的代码

dd('test');

}

如何使用css更改背景颜色或其他内容，我试过这个

 jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCcgSw6pOY1_1t4LpPQK360V0reIfLDOi0&callback=initialize"; 
document.body.appendChild(script);
});




function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    maxZoom: 4,
    minZoom: 2,
    navigationControl: false,
     scrollwheel: false,
    mapTypeControl: false,
    draggable: false,
    mapTypeId: 'roadmap',
    styles: [
        {elementType: 'geometry', stylers: [{color: '#F7F7F7'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#F7F7F7'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#BCD9E1'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#b9b9b9'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#b9b9b9'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#BCD9E1'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#BCD9E1'}]
        }
      ]



};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);





// Multiple Markers
var markers = [
    ['Capital Tower, ADNEC Complex Abu Dhabi', 24.299174,54.697277],
    ['Regional Office - Dubai - United Arab Emirates', 25.204849,55.270783],
       ['FUJAIRAH ', 21.756779, 58.842773],
     ['EGYPT', 28.822859, 26.674805],
    ['lybia', 30.123591, 16.303711],

];

// Info Window Content
var infoWindowContent =[

    ['<div class="info_content">' +
    '<h3>ABU DHABI HEADQUARTERS</h3>' +
    '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],


    ['<div class="info_content">' +
    '<h3>Palace of Westminster</h3>' +
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
    '</div>'],

    ['<div class="info_content">' +
    '<h3>Palace of Westminster</h3>' +
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
    '</div>'],

    ['<div class="info_content">' +
    '<h3>Palace of Westminster</h3>' +
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
    '</div>'],

    ['<div class="info_content">' +
    '<h3>Palace of Westminster</h3>' +
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
    '</div>'],
];

// Display multiple markers on a map
var infoWindow =   new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    var image = 'images/map-marker.png';
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: image,
        title: markers[i][0]
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(2);

    google.maps.event.removeListener(boundsListener);
});

但结果是这样的。

我需要更改整个窗口的颜色。任何帮助将不胜感激

Answer 1

你应该在你的devtools中查看html并找到parent元素的类，然后在你的style.css文件中添加你需要的样式。

如何在谷歌地图中使用infowindow更改样式

1 个答案: