1

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

基本上所有功能都可以正常工作，但在某些地方，地图会产生伪影。

屏幕截图（检查缩放控制和信息窗口）

执行以下代码：

  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 中。有什么解决办法吗？

4

1 回答 1

2

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

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

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

于 2013-07-09T09:47:50.470 回答