Question

我正在使用谷歌地图并试图在地图上插入一个div。在div中，引用了来自网址的Google地图标记： google map marker

当我在下面运行我的代码时，我在浏览器控制台中收到错误。

SEC7111：http://maps.gstatic.com/mapfiles/markers2/marker.png
影响了HTTPS安全性

我应该只是下载图片并参考它，还是有办法在我的网站的css中访问它？如果下载它是更好的选择，我的路径在CSS中会是什么？目前，我将图像保存在“App_Data-＆gt;图像”

中

$('<div/>').addClass('centerMarker').appendTo($googlemap.getDiv())
  //do something onclick
  .click(function() {
    var that = $(this);
    if (!that.data('win')) {
      that.data('win', new google.maps.InfoWindow({
        content: 'this is the center'
      }));
      that.data('win').bindTo('position', $googlemap, 'center');
    }
    that.data('win').open($googlemap);
  });

.centerMarker {
  position: absolute;
  /*url of the marker*/
  background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top: 50%;
  left: 50%;
  z-index: 1;
  /*fix offset when needed*/
  margin-left: -10px;
  margin-top: -34px;
  /*size of the image*/
  height: 34px;
  width: 20px;
  cursor: pointer;
}

<div id="map-canvas" style="height: 380px; width: 480px"></div>

Answer 1

您是否尝试过使用安全网址作为标记？

https://maps.gstatic.com/mapfiles/markers2/marker.png

浏览器可能会抱怨，因为您要求从安全页面获取不安全的资源。

Answer 2

我会说您收到此警告是因为Google Maps API使用HTTPS层（Socket 443）提供文档，并且您需要将资产转换为标准HTTP端口（80）。

您的CSS代码：

background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;

修改后的CSS代码：

background: url(https://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;

就个人而言，我建议将所有资产保存在项目文件夹中，这始终是一种更简单的工作方式。在这种情况下，图像路径将是：

background: url(App_Data/images/marker.png) no-repeat;

希望它有所帮助！

无法访问http网站以获取我的https网站中的地图标记

2 个答案: