Question

如何通过Google地图为我的.png标记设置透明背景？图像文件具有透明背景，但是当我尝试将其渲染到地图时，它显示为白色背景

marker = new google.maps.Marker({
    map: map,
    optimized: false,
    icon: new google.maps.MarkerImage('images/assets/marker.png')
});

marker.setDraggable(true);

//... some magic

map.setZoom(zoom);
map.setCenter(pos);  

marker.setPosition(pos);
marker.setMap(map);

感谢您提供ani提示!!

编辑：这不起作用...背景仍为白色（默认标记既不透明）

marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_green.png', [10][20]);

编辑：//默认标记不是透明的

编辑：新事实：//谷歌地图中应该透明的一切都不透明=＆gt;它是白色的！所有原始资产也是！

Answer 1

其余代码中必定存在一些错误，因为这样做（并且它与您的代码几乎相同）：

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(52,0),
  map: map,
  optimized: false,
  icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png')
});

段：

var mapOptions={
  zoom: 8,
  center: new google.maps.LatLng(52, 0)
};
var map=new google.maps.Map(document.getElementById('map'),mapOptions);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(52,0),
  map: map,
  optimized: false,
  icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png')
});

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div id="map" style="width:300px;height:300px"></div>

Answer 2

好吧，3个小时后我找到了解决方案。编码器错误的风格是由Webflow生成的。在默认设置中，已为所有图像设置了白色背景。

您有相同或类似的问题吗？

总是检查代码和css（主要是图片样式），即使有人告诉你它没问题。使用css propery background: white的图片不会显示为透明，永远不会。

Google Maps API运行良好且清晰。错误应该在你身边。

Answer 3

如上所述here 图像必须具有透明度，并且在RGB颜色模式下为＃34;。

第二部分是困难的。

最后我解决了它：

在Gimp
在Gimp中选择图片＆gt;模式＆gt; RGB
使用文件＆gt;导出图片＆＃34;出口为＆＃34;并选择一个png类型文件（例如out-rgb.png）。

现在，该文件具有Google地图所需的格式，可以正确显示透明度（不可见）。

Answer 4

使用 GIMP 进行一些快速编辑应该能够解决您的问题。 Lucfia 的回答是指向正确方向的指针，但对我不起作用。

修复图标以与 Google Maps API 透明集成的步骤：

在 GIMP 中打开图像。虽然图像在 GIMP 中可能看起来是透明的，但当通过 setIcon 以图标形式加载 Google Maps API 时，它不一定是透明的
转到图层 > 透明度 > 颜色到 Alpha
根据需要调整阈值/不透明度。将图像导出为 png。生成的 PNG 文件现在将使用 setIcon 透明。

请注意，从网上下载的许多图像都会有棋盘格图案，表示 alpha 通道，但实际上并没有。

谷歌地图png标记与透明背景

4 个答案:

您有相同或类似的问题吗？