Question

我正在使用gMaps.js嵌入Google地图。

基本上所有功能都在起作用，但在某些地方，地图会产生效果。

Screenshot (Check Zoom control and Infowindow)

执行以下代码：

  var map = new GMaps({
        div: '#map_canvas',
        lat: 51.594664,
        lng: 4.778375,
        zoom: 16,
        zoomControl: true,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
    });


var image = new google.maps.MarkerImage(
    '[image-link]',
    new google.maps.Size(100,109),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(5, 25)    // anchor, i.e. the point half-way along the bottom of the image
);

map.addMarker({
    lat: 51.59554,
    lng: 4.789006,
    title: 'TEST',
    icon: image,
    infoWindow: {
        content: '<h2>TEST</h2><p>HTML Content</p>'
    }
});

var styles = [
  {
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "simplified" },
      { "color": "#21bbe2" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "on" },
      { "hue": "#ff0011" },
      { "color": "#9e8baa" }
    ]
  }
]
  map.addStyle({
    styledMapName:"Styled Map",
    styles: styles,
    mapTypeId: "map_style"  
});

map.setStyle("map_style")

我找不到任何关于这个问题的信息。我试图单独删除代码的所有部分，但这不起作用。它发生在Chrome和Firefox中。任何解决方案？

Answer 1

这几乎总是由页面中的CSS引起的，它覆盖了地图中使用的样式。我敢打赌，如果你将相同的地图加载到没有CSS的页面中，一切都会正常显示。

当然现在的问题是确定什么的CSS搞砸了。您可以做的一件事是在Chrome中使用DOM检查器（或在Firefox中使用Firebug，或者您喜欢的任何DOM检查器）。选择具有工件的元素之一，然后选中该元素的“样式”面板。

如果我的猜测是正确的，您将看到自己的CSS中的样式条目影响Maps API元素。

Gmaps中的工件

1 个答案: