javascript - map 中的人工制品

标签 javascript google-maps google-maps-api-3

<分区>

我正致力于使用 gMaps.js 嵌入 Google map 。

基本上所有功能都可以使用，但在某些地方 map 会出现瑕疵。

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

最佳答案

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

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

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

关于javascript - map 中的人工制品，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17544989/