在JavaScript文件中使用HTML向弹出窗口添加内容时出现问题

时间:2017-06-24 11:59:57

标签: javascript html popup

我在弹出窗口中添加元素。

内容的HTML在.js文件中。我已经能够添加文本(由.css链接设置样式)和图像,我在HTML标记中设置了样式,但我想添加一个链接。我已多次尝试过,但似乎没有任何效果。

除此之外,目前还不可能通过点击例如休息之间的输入来组织代码行。我必须把它作为一长串不间断的代码,这很烦人,因为作为初学者,我喜欢非常清楚地组织事情...

这似乎是一个简单的问题,但无论出于何种原因,当您将HTML编码放在.js文件中时,不同的规则似乎适用,如果有人可以提出建议或指出这里适用的规则....

totaalurenvak

1 个答案:

答案 0 :(得分:0)

我认为你正在使用leafletjs :) 格式内容和链接请参阅示例(请复制代码,此处无法弹出;我的独立示例有效)

如果用鼠标右键单击,弹出窗口就可以了!



	var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

	L.marker([51.5, -0.09]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

	L.circle([51.508, -0.11], 500, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.5
	}).addTo(mymap).bindPopup("I am a circle.");

	L.polygon([
		[51.509, -0.08],
		[51.503, -0.06],
		[51.51, -0.047]
	]).addTo(mymap).bindPopup("I am a polygon.");

 	var popup = L.popup();

	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent('<img src="images/cog.png" style="width:150px; height:150px;"/><br />' +
'<b>Portland Cycle Safety Map</b><br />' +
'This map is intended to bring dangerous intersections' +
'and street segments to the attention of Portland area cyclists: this is a work in progress.' +
'Each skull marks the location a cyclist has been killed by an automobile sometime between 2005 and 2017.' + e.latlng.toString() +'<br /> made with <a href="http://leafletjs.com/examples/quick-start/" target="_blank">leafletjs</a>')
			.openOn(mymap);
	}

	mymap.on('click', onMapClick);
&#13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>

</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>

</body>
&#13;
&#13;
&#13;