我使用openlayers3来显示地图，现在我想单击鼠标弹出一个对话框，但是无论我如何修改下面的代码都无法弹出窗口，请帮忙检查一下，谢谢大家。下面的代码有点长，但是我真的不知道我哪里写错了，所以我必须全部张贴。对不起。
<pre><code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title>
<style type="text/css">
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
}
.mouse-position-wrapper{
width:300px;
height:29px;
color:#FF00FF;
position:absolute;
right:20px;
bottom:6px;
z-index:999;
}
.ol-rotate{
right:40px;
}
.ol-scale-line {
left:180px;
}
.ol-zoomslider{
top:120px;
left: 9px;
}
#map {
clear: both;
position: relative;
border: 1px solid black;
}
#main{
width: 1024px;
height: 380px;
}
.ol-overlaycontainer-stopevent
{
display:none;
}
.div_options_background,.div_options
{
position: absolute;
top: 5px;
left: 5px;
//padding: 3px 5px;
border-radius: 5px 5px;
}
.div_options_background
{
//background-color: #3385ff;
}
.scale-line {
position: absolute;
bottom:0px;
left:0px;
z-index:1999;
}
.ol-scale-line {
position: relative;
bottom: 0px;
left: 0px;
z-index:1999;
}
.ol-popup {
position: absolute;
background-color: white;
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
z-index:1999;
}
.ol-popup:after, .ol-popup:before {
top:0;// 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index:1999;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
z-index:1999;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
z-index:1999;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
z-index:1999;
}
.ol-popup-closer:after {
content: "✖";
z-index:1999;
}
*popup code is end.
</style>
<script src="/Scripts/js/jquery2.1.3.min.js" type="text/javascript"></script>
<script src="/Scripts/commonjs/mf_urlOp.js" type="text/javascript"></script>
<script src="/Scripts/ext4.2/ext-all.js"></script>
<script src="/view/GIS/measure.js" type="text/javascript"></script>
<link href="/Scripts/ext4.2/resources/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/js/bootstrap.min.js" type="text/javascript"></script>
<link href="/Scripts/js/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!--
<link rel="stylesheet" href="http://localhost:8099/geoserver/openlayers3/ol.css" type="text/css">
<script src="http://localhost:8099/geoserver/openlayers3/ol.js" type="text/javascript"></script>
-->
<script src="/Scripts/js/ol.js"></script>
<link rel="stylesheet" href="/Scripts/js/ol.css">
</head>
<body >
<div id='main'>
<div id="popup" class="ol-popup">mmmmmmmmmmmmmmmmmm
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" style="width:300px; height:120px;">aaaaaaaaaaaaaaaaaaaaa</div>
</div>
<div id="map" class="map">
<div id="scale-line" class="scale-line"></div>
</div>
<div class="div_options_background"></div>
<div class="div_options" id="div_options" >
模式:
<select id="select_mode" style='font-size:12px;border-radius: 5px;'>
<option value ="HaiYang_XiaoQuQuYu_WU">全部隐藏</option>
<option value ="HaiYang_XiaoQuQuYu_YCWD" onclick="setStyle(layerImage_QuYu,'HaiYang_XiaoQuQuYu_YCWD');">一网温度</option>
<option value="HaiYang_XiaoQuQuYu_YCYL">一网</option>
<option value="audi">未完...</option>
</select>
测量:<select id="type" style="border-radius:5px">
<option value="">无</option>
<option value="length">线</option>
<option value="area">面</option>
</select>
<ol id="measureOutput" style="margin:0;padding: 0;text-align: center;background-color: lightgreen;"></ol>
</div>
</div>
<div id="label" style="display: none;">
<div id="marker" class="marker" title="Marker">
<a class="address" id="address" target="_blank" href="http://www.openlayers.org/">标注点11111111111</a>
</div>
</div>
<div id="location"></div>
<div id="scale">
</div>
<div id="nodelist">
<em>Click on the map to get feature info</em>
</div>
<script type="text/javascript">
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
});
var projection =ol.proj.get("EPSG:3857");
var format = 'image/png';
var bounds = [126.23673285210907, 30.151201961467336,
140.6467487034272, 40.939360900441784];
var projectionExtent =/*[-100,-90,100,90];*/ projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var res = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
res[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var scaleLineControl = new ol.control.ScaleLine();
var layerImage_QuYu= new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8099/geoserver/cite/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
STYLES: 'HaiYang_XiaoQuQuYu_WU',
"exceptions": 'application/vnd.ogc.se_inimage',
"LAYERS": 'cite:View_HaiYangXiaoQu',
}
})
});
var map = new ol.Map({
controls:ol.control.defaults().extend([mousePositionControl]),
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量1-4级",
url: "http://t0.tianditu.com/vec_w/wmts?tk=70ef04fe6a1cedea7cd7523dfd7816ff",
layer: "vec",
style: "default",
matrixSet: "w",
format: "tiles",
wrapX: true,
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res,
matrixIds: matrixIds,//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量注记1-4级",
//url: "http://t7.tianditu.gov.cn/cva_c/wmts?tk=70ef04fe6a1cedea7cd7523dfd7816ff",
url: "http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=70ef04fe6a1cedea7cd7523dfd7816ff",
layer: "cva",
style: "default",
//matrixSet: "c",
matrixSet: "w",
format: "tiles",
wrapX: true,
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res,
matrixIds:matrixIds,// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
}),
layerImage_QuYu,
new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8099/geoserver/cite/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
STYLES: '',
LAYERS: 'cite:SSql_GuanDao',
}
})
}),
new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://localhost:8099/geoserver/cite/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'cite:SSql_GuanDao',
}
})
}),
],
target: "map",
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')}),
mousePositionControl,
]),
view: new ol.View({
projection: projection,
center: [13486339.06881, 4406575.57138],
zoom: 4
})
});
//单击事件
map.on('singleclick', function(evt) {
var typeSelect=document.getElementById('type');
if(typeSelect.value!="")
{
return;
}
var view = map.getView();
var viewResolution = view.getResolution();
var source = layerImage_QuYu.get('visible') ? layerImage_QuYu.getSource() : layerTile_QuYu.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
if (url) {
if(mf_urlOp.getParam(url,"QUERY_LAYERS")=="cite%3AView_HaiYangXiaoQu"
||mf_urlOp.getParam(url,"QUERY_LAYERS")=="cite:View_HaiYangXiaoQu")
{
console.log(url);
$.ajax({
url:'jsonWebGIS_getInfo',
data:{'url':url},
type: "post", //规定请求的类型（GET 或 POST）。
dataType:'json',
success: function(data) { //请求成功后返回
console.log(data);
alert(data[0].ECHW);
},
error: function() { //请求失败后返回
//alert(234);
console.log('Request Error.');
}
});
}
}
});
map.getView().setCenter([13486339.06881, 4406575.57138]);
map.getView().setZoom(15);
function setStyle(sourceLayer,style)
{
var v1=sourceLayer.getSource();
var v2=v1.getParams();
v2.STYLES=style;
v1.changed();
}
init();
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度. 单位为毫秒（ms）
}
}));
//overlay.setPosition([13486339.06881, 4406575.57138]);
/**
* Add a click handler to the map to render the popup.
*/
map.addEventListener('click', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>你点击的坐标是：</p><code>' + hdms + '</code>';
container.style.height = "100px;"
content.style.overflowY = "scroll";
content.style.height = "90px";
content.style.width = "100px";
overlay.setPosition(coordinate);
map.addOverlay(overlay);
});
</script>
</body>
</html>
</code></pre>