<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GoogleMap.jsp</title>
<link rel="stylesheet" href="../Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../Style/style.css" type="text/css">
<style type="text/css">
#mymap {
width: 800px;
height: 400px;
border:1px solid gray;
}
</style>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" src="../Script/lib/OpenLayers.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function init(){
var map = new OpenLayers.Map('mymap');
//创建google Map图层对象
var googleLayer = new OpenLayers.Layer.Google("google");
var styleMap = new OpenLayers.StyleMap({
'default': new OpenLayers.Style({
strokeColor: "#333333",
strokeWidth: 1.2,
strokeOpacity: 1
}),
'select': new OpenLayers.Style({
fillColor: "red",
strokeWidth: 10,
pointRadius: 30
})/* ,
'temporary': new OpenLayers.Style({
strokeColor: "yellow"
}) */
});
// 添加图层
map.addLayers([googleLayer]);
var switchControl = new OpenLayers.Control.LayerSwitcher();
map.addControls([switchControl,
new OpenLayers.Control.MousePosition()]);
map.addControl(new OpenLayers.Control.Zoom({"zoomInText":'大', "zoomOutText":'小'}));
map.zoomToMaxExtent();
var ll = null;
var wind = null;
map.events.register('click', this, function(event) {
if (wind != null) {
wind.close();
}
/* if (map.popups.length > 0) {
for (var i = map.popups.length - 1; i >= 0; --i) {
if (map.popups[i] != null) {
map.removePopup(map.popups[i]);
}
}
} */
ll = map.getLonLatFromPixel(event.xy).transform(
map.getProjectionObject(),
new OpenLayers.Projection("EPSG:4326")
);
/* map.setCenter(ll.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
)); */
// popup = new OpenLayers.Popup("chicken",
// ll.transform(
// new OpenLayers.Projection("EPSG:4326"),
// map.getProjectionObject()
// ),
// new OpenLayers.Size(200,100),
// "example popup",
// true);
/* popup = new OpenLayers.Popup.FramedCloud("chicken",
ll.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
new OpenLayers.Size(200,100),
"example popup", null,
true);
popup.panMapIfOutOfView = true;
map.addPopup(popup); */
wind = new google.maps.InfoWindow({
content:'<div style="height:100px;width:200px;">aaa<br>aaa</div>',
maxWidth: 400,
position:new google.maps.LatLng(ll.lat,ll.lon),
pixelOffset: new google.maps.Size(0,0),
zIndex: 1000010,
disableAutoPan: true
});
wind.open(OpenLayers.Layer.Google.cache['OpenLayers_Map_2'].mapObject);
});
// 将地图中心点设置为西安市，有外部到地图需要转换，Google地图投影为EPSG：900913
// 从地图到外部也是需要转换的，刚好是反的，每种地图的投影是不一样的
map.setCenter(new OpenLayers.LonLat(
108.88769544660661,
34.33617899255311
).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
));
/* if (map != OpenLayers.Layer.Google.v3) {//
var aa = OpenLayers.Layer.Google.cache['OpenLayers_Map_2'].mapObject;
console.log(aa);
} */
}
</script>
</head>
<body onload="init();">
<div id="mymap" class="smallmap"></div> <div id="sanjiao" style="position: absolute;display: none;width: 20px;height: 30px;background-color: red;"></div> </body> </html>
GoogleMaps-API 写道
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh-cn#InfoWindow
相关推荐
首先，要加载Google地图的卫星影像，开发者需要在OpenLayers中设置一个图层，指定其来源为Google Maps的瓦片服务。这通常涉及到创建一个`ol.source.XYZ`对象，并配置其URL指向Google Maps的瓦片服务器。然后，将该源...
- **地图层（Layers）**：OpenLayers中的地图由多个图层组成，每个图层可以是不同的数据源，如卫星图像、地形图或者自定义矢量数据。 - **投影（Projections）**：地图坐标系统转换，OpenLayers支持多种投影方式，...
- **Google Maps**：通过OpenLayers，开发者可以无缝集成Google Maps的各种功能，如街景视图、卫星图像等。 - **Yahoo! Maps**：尽管Yahoo! Maps现在已经不再被广泛使用，但OpenLayers仍支持其地图服务。 - **微软...
OpenLayers支持多种投影，如EPSG:4326（WGS84，常用于GPS坐标）和EPSG:3857（Spherical Mercator，Google Maps使用）。 4. **控件(Control)**：控件是地图上的交互元素，如缩放滑块、导航工具、定位按钮等。`...
在OpenLayers中，Map对象是整个地图应用的核心，包含了地图的视图、图层集合、控件等元素。你可以通过设置地图的中心点、分辨率、投影等属性来定制地图显示。此外，Map对象还提供了交互事件，如单击、双击、拖动等，...
创建谷歌地图效果，OpenLayers提供了兼容Google Maps的图层类型。 OpenLayers API和类用于画点、线、面，如`OpenLayers.Geometry.Point`, `OpenLayers.Geometry.LineString`, `OpenLayers.Geometry.Polygon`。 ...
本案例的主题是“openlayers加载本地离线底图瓦片google数据直接运行即可”，这意味着我们可以通过OpenLayers加载已经下载好的Google Maps离线瓦片数据。离线地图瓦片是一种将大型地图分割成许多小块图片（通常为256...
"基于Openlayers和GoogleMap技术的边检Web地理信息系统研究" 该研究论文旨在设计和实现一个基于Openlayers和GoogleMap技术的边检Web地理信息系统，以满足工作需求，提供全国边检口岸信息的浏览和查询，直接定位或...
Openlayers是纯javascript开发的一套能够提供地图操作的库。其中引用了Prototype.js和Rico...Openlayers与Google Maps和Visual Earth类似，都能够在现有的web应用中动态加入一些地图服务，使得现有的web应用更加直观。
在OpenLayers中，你可以通过设置图层的类型来显示不同类型的地图。例如，瓦片图层（Tile Layer）适合加载大型数据集，因为它会将地图分割成小块进行加载；矢量图层（Vector Layer）可以显示动态数据，如点、线和面，...
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS、TMS等，...所以，这份压缩包中的资料对于OpenLayers的学习者和开发者来说，是不可或缺的参考资料。
Feature对象则结合了Geometry和属性数据，是地图上可视化的基础。 6. **Geometry**（geometry.html）：几何对象用于描述地图上的位置和形状，包括Point（点）、LineString（线串）、Polygon（多边形）等。它们支持...
增强地图体验，并为其用户和客户提供在不放弃情况下在其项目中使用Google Maps的能力。 调用API ... < link rel =" stylesheet " href =" ...
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，该示例实现了在openlayers的地图‘贴’上echarts的图表，具体可参见我的博客...
2. **地图服务兼容性**：它可以与多种地图服务提供商集成，如Google Maps、Bing Maps、MapQuest、OpenStreetMap等，也可以直接使用WMS（Web Map Service）和WMTS（Web Map Tile Service）。 3. **丰富的地图操作**...
GeoServer+OpenLayers 发布下载的 Google 卫星影像 GeoServer 是一个基于 Java 的开源地理信息系统（GIS），它可以提供强大的空间数据存储、管理和共享功能。OpenLayers 是一个基于 JavaScript 的开源地理信息系统...
OpenLayers地图加入google图层 OpenLayers google layer 自己可以用google账号登录申请特定域名的地图key.
OpenLayers中文学习文档，原始文档是.md格式的转换成Html后转换成了chm格式，感谢原文作者。
你可以根据需要替换其他地图源，如Google Maps或Bing Maps，或者添加自定义图层。 此外，Vue和OpenLayers结合的好处在于，你可以利用Vue的状态管理（如Vuex）和响应式特性，实现更复杂的功能，如动态加载图层、添加...