1. Web/H5 使用 panolens.js 实现360全景地图
panolens.js 是一款很强大的 全景图片查看器，也可播放视频，详情可查看 官网
最近在浏览东西时不小心发现 GitHub 上也有 panolens.js 的 文档和demo 。
大概分为两种模式，模块化引用 和 普通html引用，如下图：
本文章主要分享一下 普通html引入 ，举个栗子：
哇哦竟然实现了，小伙伴们赶快试试吧~~~ 记得点赞哦~~~
2. 电子地图系统WEBGIS 关键技术
随着Internet技术的不断发展和人们对地理信息系统(GIS)需求的日益增长，利用Internet在Web上发布空间数据，为用户提供空间数据浏览、查询和分析的功能，已成为地理信息系统(GIS)发展的必然趋势。于是，基于Internet技术的地理信息系统———WEBGIS就应运而生。
WEBGIS是一个将地理信息处理和地理信息分布于Web计算平台进行的网络化GIS系统，它是面向对象软件构件技术、信息互操作技术、网络技术发展的产物。系统采用ARCGISServer作为WEBGIS支撑平台实现基础地理空间数据和地质空间数据的网络发布。
1.栅格WEBGIS技术
“栅格WEBGIS”(Grid WEBGIS)这一概念和产品是对传统Web地图服务方式的一种革命。启用这个名称，可谓是一语双关:就是提供地理底图的方式来讲，再也不是传统的方式———服务器端将矢量地图临时生成栅格图发给客户端，而是事先生成好栅格图，用户请求时不必做任何处理就可以即时发给客户端;就客户端的显示方式来讲，摒弃了传统的一张地图的显示方式，客户端采用多幅小图拼接的方式显示，总体看起来像是小图片填充一个大的栅格的效果。
预先制作好所要发布的地理底图、遥感影像不同缩放比例下的静态图像存放于服务器端，待实际发布时根据缩放比例在不同级别图像之间进行切换。这种技术大大提高了地图的Web浏览速度。
2.Web服务器端技术
Web服务器端主要由两部分组成，即IIS(Internet Information Server)和WEBGIS服务器(包括ArcIMS组件、InternetGIS站点设计向导程序Wizard及面向城市地质Web应用的扩展组件)。
其中，IIS主要负责接收普通的用户请求，当其需要空间数据时则向WEBGIS服务器发出请求，WEBGIS服务器接收到浏览器端的请求后，利用ArcIMS组件和城市地质Web应用扩展组件的功能，进行处理、分析、计算等;如果需要数据服务器的数据，则由WEBGIS服务器向数据服务器发出请求。
3.Web客户端相关技术
包括IITML、客户端脚本语言、VML(矢量可标记语言)、XML、DOM(文档对象模型)、CSS(层叠样式表)及Ajax(Asynchronous JavaScript and XML的缩写)，这些技术的综合运用大大扩展了系统功能，大幅提高了系统响应速度。
3. 百度地图web开发，全景模式下的问题
每次放大后，鼠标先右击一下就退出全景模式了，再点击详情地址OK了，说实话我也很烦它，但没法彻底屏蔽掉，忍无可忍就换Google地图吧，那个更新的速度也是网络没法比的！
4. google地图(web版)是怎么实现的
主要技术是javascript，和服务器交互的javascript编程，即Ajax。其中核心技术是地图 API，这里有一个google自己开发的集成 Google AJAX API技术，基于通过标准 HTTP 请求发送的网址参数来创建地图，并将地图作为可在网页上显示的图像返回！
可以去google地图的开发者网站看看 http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html。
5. javaweb 开发有哪些地图插件是到乡镇级别的
<!DOCTYPE><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>网络地图</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script src="http://api.map..com/api?v=1.4" type="text/javascript"></script></head><body> <input type="text" id="cityName" value="福州"/><input type="button" onclick="setCity()" value="查找" /><div id="container" style="width:1024px;height:600px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(120.2,30.25); //创建点坐标 map.centerAndZoom(point, 14); //初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); //激活滚轮调整大小功能 map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角； map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方； map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方； map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl var search = new BMap.LocalSearch("中国", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //结果呈现设置， map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。 // alert(html.innerHTML) }//这一段可以不要，只不过是为学习更深层次应用而加入的。 }); function setCity(){ search.search(document.getElementById("cityName").value); } search.search(document.getElementById("cityName").value); </script></body></html>第二种： 谷歌
首先引入 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
代码如下
js代码
var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中国地图全图
var optMap =
{
zoom: 15,
center: myLatlng,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment
position: google.maps.ControlPosition.TOP_LEFT
},
// navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT
},
//ROADMAP SATELLITE
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('container'),optMap);
map.setOptions({Zoom:18,center:myLatlng});
html
<div id="locationDiv" >
<div id="container" style="position:relative; width:450px; height:300px;"></div>
</div>