时间戳

首页 > 解决方案 > 传单弹出窗口在 HTTPS 上无法正确执行，并且在 HTTP 上工作得更好

javascript - 传单弹出窗口在 HTTPS 上无法正确执行，并且在 HTTP 上工作得更好

问题描述

我用传单创建了一个地图，并添加了一个弹出窗口 [使用 HTTP] [在此处输入图像描述][2]：https ://i.stack.imgur.com/Rfbfd.png 所以当用户点击县它应该显示一个包含一些信息的弹出窗口，当我将地图添加到我的网站时，弹出窗口显示在屏幕的右下方，有人知道如何解决这个问题吗？[使用 HTTPS][2]：https ://i.stack.imgur.com/xVIST.png

这是我的代码：-

function countriesStyle(feature){
	return {
		stroke: '#179989',
		fill: 'brightgreen',
		preferCanvas: false,
		fillColor : '#ccc',
		weight : 0.5,
		opacity : 1,
		dashArray : 3,
		fillOpacity : 1,
		dashArray: null,
		dashOffset: null
	}
}
//creating a new map
var map = L.map('map').setView([37.4, -120], 5.8);

//create a new Geojason layer and set it up to basins var ....
var basinsLayer = L.geoJson(ca, basins).addTo(map);
basinsLayer.setStyle({fillColor :'#ccc'});
function testStyle(feature, layer) {
	function changeURL() {
	   //get the URL and change the location.search to Basin_Name
       var theURL = "https://gx.otdev3.com/basin/antelope-valley";
       return  theURL.replace("antelope-valley", feature.properties.Basin_Name);
	}
	// Basin Number of the Basins Pages ...
	if(feature.properties.Basin_Number == "1-001" || 
		feature.properties.Basin_Number == "1-002.01" ||
		feature.properties.Basin_Number == "1-002.02" ||
		feature.properties.Basin_Number == "1-003" ||
		feature.properties.Basin_Number == "1-004" ||
		feature.properties.Basin_Number == "1-005" ||
		feature.properties.Basin_Number == "1-052" ||
		feature.properties.Basin_Number == "1-055.01" ||
		feature.properties.Basin_Number == "2-001" ||
		feature.properties.Basin_Number == "2-002.02" ||
		feature.properties.Basin_Number == "2-009.01" ||
		feature.properties.Basin_Number == "2-009.02" ||
		feature.properties.Basin_Number == "2-009.04" ||
		feature.properties.Basin_Number == "2-010" ||
		feature.properties.Basin_Number == "2-032" ||
		feature.properties.Basin_Number == "2-033" ||
		feature.properties.Basin_Number == "2-037" ||
		feature.properties.Basin_Number == "2-038" ||
		feature.properties.Basin_Number == "2-039" ||
		feature.properties.Basin_Number == "3-001" ||
		feature.properties.Basin_Number == "3-002.01" ||
		feature.properties.Basin_Number == "3-002.02" ||
		feature.properties.Basin_Number == "3-003.01" ||
		feature.properties.Basin_Number == "3-003.02" ||
		feature.properties.Basin_Number == "3-003.03" ||
		feature.properties.Basin_Number == "3-003.04" ||
		feature.properties.Basin_Number == "3-004.01" ||
		feature.properties.Basin_Number == "3-004.02" ||
		feature.properties.Basin_Number == "3-004.04" ||
		feature.properties.Basin_Number == "3-004.05" ||
		feature.properties.Basin_Number == "3-004.06" ||
		feature.properties.Basin_Number == "3-004.09" ||
		feature.properties.Basin_Number == "3-004.10" ||
		feature.properties.Basin_Number == "3-004.11" ||
		feature.properties.Basin_Number == "3-007" ||
		feature.properties.Basin_Number == "3-008" ||
		feature.properties.Basin_Number == "3-009" ||
		feature.properties.Basin_Number == "3-012" ||
		feature.properties.Basin_Number == "3-013" ||
		feature.properties.Basin_Number == "3-014" ||
		feature.properties.Basin_Number == "3-015" ||
		feature.properties.Basin_Number == "3-016" ||
		feature.properties.Basin_Number == "3-025" ||
		feature.properties.Basin_Number == "3-026" ||
		feature.properties.Basin_Number == "3-027" ||
		feature.properties.Basin_Number == "4-002" ||
		feature.properties.Basin_Number == "4-003.01" ||
		feature.properties.Basin_Number == "4-004.02" ||
		feature.properties.Basin_Number == "4-004.05" ||
		feature.properties.Basin_Number == "4-004.06" ||
		feature.properties.Basin_Number == "4-004.07" ||
		feature.properties.Basin_Number == "4-006" ||
		feature.properties.Basin_Number == "4-007" ||
		feature.properties.Basin_Number == "4-008" ||
		feature.properties.Basin_Number == "4-011.01" ||
		feature.properties.Basin_Number == "4-012" ||
		feature.properties.Basin_Number == "4-013" ||
		feature.properties.Basin_Number == "5-004" ||
		feature.properties.Basin_Number == "5-006.01" ||
		feature.properties.Basin_Number == "5-006.02" ||
		feature.properties.Basin_Number == "5-006.03" ||
		feature.properties.Basin_Number == "5-006.04" ||
		feature.properties.Basin_Number == "5-006.05" ||
		feature.properties.Basin_Number == "5-006.06" ||
		feature.properties.Basin_Number == "5-012.01" ||
		feature.properties.Basin_Number == "5-014" ||
		feature.properties.Basin_Number == "5-021.50" ||
		feature.properties.Basin_Number == "5-021.51" ||
		feature.properties.Basin_Number == "5-021.52" ||
		feature.properties.Basin_Number == "5-021.53" ||
		feature.properties.Basin_Number == "5-021.54" ||
		feature.properties.Basin_Number == "5-021.55" ||
		feature.properties.Basin_Number == "5-021.56" ||
		feature.properties.Basin_Number == "5-021.57" ||
		feature.properties.Basin_Number == "5-021.58" ||
		feature.properties.Basin_Number == "5-021.59" ||
		feature.properties.Basin_Number == "5-021.60" ||
		feature.properties.Basin_Number == "5-021.61" ||
		feature.properties.Basin_Number == "5-021.62" ||
		feature.properties.Basin_Number == "5-021.63" ||
		feature.properties.Basin_Number == "5-021.60" ||
		feature.properties.Basin_Number == "5-021.61" ||
		feature.properties.Basin_Number == "5-021.62" ||
		feature.properties.Basin_Number == "5-021.63" ||
		feature.properties.Basin_Number == "5-021.64" ||
		feature.properties.Basin_Number == "5-021.65" ||
		feature.properties.Basin_Number == "5-021.66" ||
		feature.properties.Basin_Number == "5-021.67" ||
		feature.properties.Basin_Number == "5-021.69" ||
		feature.properties.Basin_Number == "5-022.01" ||
		feature.properties.Basin_Number == "5-022.02" ||
		feature.properties.Basin_Number == "5-022.03" ||
		feature.properties.Basin_Number == "5-022.04" ||
		feature.properties.Basin_Number == "5-022.05" ||
		feature.properties.Basin_Number == "5-022.06" ||
		feature.properties.Basin_Number == "5-022.07" ||
		feature.properties.Basin_Number == "5-022.08" ||
		feature.properties.Basin_Number == "5-022.09" ||
		feature.properties.Basin_Number == "5-022.10" ||
		feature.properties.Basin_Number == "5-022.11" ||
		feature.properties.Basin_Number == "5-022.12" ||
		feature.properties.Basin_Number == "5-022.13" ||
		feature.properties.Basin_Number == "5-022.14" ||
		feature.properties.Basin_Number == "5-022.15" ||
		feature.properties.Basin_Number == "5-022.16" ||
		feature.properties.Basin_Number == "5-022.18" ||
		feature.properties.Basin_Number == "5-029" ||
		feature.properties.Basin_Number == "6-005.01" ||
		feature.properties.Basin_Number == "6-012.01" ||
		feature.properties.Basin_Number == "6-012.02" ||
		feature.properties.Basin_Number == "6-044" ||
		feature.properties.Basin_Number == "6-054" ||
		feature.properties.Basin_Number == "7-005" ||
		feature.properties.Basin_Number == "7-021.01" ||
		feature.properties.Basin_Number == "7-021.02" ||
		feature.properties.Basin_Number == "7-021.03" ||
		feature.properties.Basin_Number == "7-021.04" ||
		feature.properties.Basin_Number == "7-022" ||
		feature.properties.Basin_Number == "7-024.01" ||
		feature.properties.Basin_Number == "7-024.02" ||
		feature.properties.Basin_Number == "7-025" ||
		feature.properties.Basin_Number == "7-028" ||
		feature.properties.Basin_Number == "7-029" ||
		feature.properties.Basin_Number == "7-030" ||
		feature.properties.Basin_Number == "7-033" ||
		feature.properties.Basin_Number == "7-034" ||
		feature.properties.Basin_Number == "7-035" ||
		feature.properties.Basin_Number == "7-036" ||
		feature.properties.Basin_Number == "7-037" ||
		feature.properties.Basin_Number == "7-038" ||
		feature.properties.Basin_Number == "7-039" ||
		feature.properties.Basin_Number == "7-061" ||
		feature.properties.Basin_Number == "8-001" ||
		feature.properties.Basin_Number == "8-002.01" ||
		feature.properties.Basin_Number == "8-002.03" ||
		feature.properties.Basin_Number == "8-002.07" ||
		feature.properties.Basin_Number == "8-002.08" ||
		feature.properties.Basin_Number == "8-002.09" ||
		feature.properties.Basin_Number == "8-004.01" ||
		feature.properties.Basin_Number == "8-004.02" ||
		feature.properties.Basin_Number == "8-005" ||
		feature.properties.Basin_Number == "8-009" ||
		feature.properties.Basin_Number == "9-007" ||
		feature.properties.Basin_Number == "9-010" ||
		feature.properties.Basin_Number == "9-015"){
		// only for the existing basin pages 
		layer.setStyle({fillColor :'#1FC18F'});
		layer.bindPopup(
			'<p>' + 
			feature.properties.Basin_Name + '</p>' +
			"<p> Basin Number: "+ feature.properties.Basin_Number + "</p>" +  	 
			"<a class='basin_link' href='" + changeURL()+ "'>Take me to that Basin</a>");
	}else {
		layer.bindPopup("<h5'>This basin is not subject to SGMA</h5>");
	}
	// change the URL
	$('.basin_link').attr('href', changeURL());
};
		
//get basin geoJson file and add it to the map
L.geoJson(basins, {
 	onEachFeature: testStyle,
 	style: countriesStyle
}).addTo(map);

标签： javascripthttpsleaflet

解决方案

如果没有看到你所有的代码，我会说传单 CSS 文件丢失或损坏，或者你可能会在它生效时以某种方式覆盖它。

EG，您可能正在设置.leaflet-popup-content为position: absolute;

如果您可以提供一个关于 jsfiddle 之类的工作示例来显示问题所在，我可以更好地查看，看看我是否能找到真正的原因。

更新：进一步考虑，您可能通过 http 而不是 https 调用 leaflet.css，某些浏览器在以 https 方式查看网站时会阻止所有 http 内容。

您可以通过调用 CSS 的 https 副本来解决此问题。

推荐阅读