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

Question

我正在使用 google 地图并尝试在地图上插入 div。 div 中引用了 url 中的 google 地图标记： google map marker

当我运行下面的代码时，浏览器控制台出现错误。

SEC7111: HTTPS security is compromised by http://maps.gstatic.com/mapfiles/markers2/marker.png

我应该只下载图片并引用它，还是有办法在我的网站 css 中访问它，如下所示？如果下载它是更好的选择，我在 CSS 中的路径是什么？目前我将图像保存在 'App_Data->Images'

$('<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

您是否尝试过使用安全的 URL 作为标记？

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

浏览器可能会抱怨，因为您正在从安全页面请求不安全的资源。

Answer 2

我会说您收到此警告是因为 Google 地图 API 使用 HTTPS 层（套接字 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 站点中获取地图标记

Can't access http site to get map marker in my https site

html

javascript

css

https

google-maps-api-3