百度地圖和solr展現資源和附近等功能的實現 三
這裏講怎麼描述地圖上面的8個點 頁面用的javascript
Thymeleaf Thymeleaf 官網：https://www.thymeleaf.org/
描繪點的時候有可能一個經緯度出現多個點，代碼裏面也有解決。這裏直接給出代碼。大部分的js和css均可以網上下載，描繪點的圖片看提供給你們，這個圖也是咱們設計根據百度地圖上的demo繪製的。css
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>儀器搜索</title>
<link href="/search/css/page/jquery-ui-1.11.4.css" rel="stylesheet">
<link href="/search/css/page/commonV3.css" rel="stylesheet"
type="text/css" />
<link href="/search/css/page/styleV3.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="/search/css/plugins/myPagination.css">
<script src="/search/js/jquery-1.9.1.js"></script>
<script src="/search/js/jquery-1.9.1.min.js"></script>
<script src="/search/js/jquery-ui-1.11.4.js"></script>
<script type="text/javascript"
src="/search/js/plugins/jquery.dotdotdot.min.js"></script>
<!-- <script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.13&key=你本身的ak"></script> -->
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你本身的ak"></script>
<style>
.BMap_cpyCtrl {
display: none;
}
.line-limit-length {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.line-limit-length1 {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
</style>
<style>
.shade{width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;left:0;top:0;bottom:0;right:0;opacity:0.8;z-index:1001;display:none}
.video-box{width:865px;height:490px;background:#000;display:none;position:absolute;z-index:1002}
</style>
<style type="text/css">
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
.line-limit-length,.line-limit-length1{
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#province li{
text-decoration: none;
list-style: none;//去掉li前面的圓點
display: inline;//讓li橫向排列
}
</style>
</head>
<body>
<nav th:include="frontdesk/search/searchHeader::nav" class="navbar navbar-default navbar-custom navbar-fixed-top"></nav>
<div class="shade"></div>
<div class="video-box"></div>
<div class="select-result">
<ul>
<li th:each="pro:${provinceInstr}" th:class="${area==pro.name}?'select-cur'" th:onclick="'javascript:changeProvince(\''+${pro.name}+'\')'">
<span th:text="${pro.name}"></span>(<span th:text="${pro.value}"></span>臺)
</li>
<!-- <li th:each="pro:${provinceInstr}" th:onclick="changeProvince(+'${pro.name}'+)">
<span th:text="${pro.name}"></span>(<span th:text="${pro.value}"></span>臺)
</li> -->
</ul>
</div>
<!-- End 篩選 -->
<div id="search-list">
<ul class="list-result">
<li>區域 <select name="myLocation" id="location">
<option th:value="所有" th:selected="${area==''}">所有</option>
<option th:value="上海市" th:selected="${area==''?false:area == '上海市'}">上海市</option>
<option th:value="江蘇省" th:selected="${area==''?false:area == '江蘇省'}">江蘇省</option>
<option th:value="浙江省" th:selected="${area==''?false:area == '浙江省'}">浙江省</option>
<option th:value="安徽省" th:selected="${area==''?false:area == '安徽省'}">安徽省</option>
</select>
</li>
<li>共找到<span th:text="${totalSize }"></span>臺儀器</li>
</ul>
<ul id="list-ul">
<!-- <c:forEach items="${resultList}" var="orgnInstr" varStatus="i"></c:forEach> -->
<li th:each="orgnInstr,status:${resultList}">
<div class="bubble-ng drift-left" th:text="${status.count}"></div>
<div class="search-infor drift-left">
<h3 class="line-limit-length" th:text="${orgnInstr.instrName}"></h3>
<h4 class="line-limit-length1" th:text="${orgnInstr.companyName}"></h4>
</div>
</li>
</ul>
<div id="page" class="pagination" align="center">
</div>
</div>
<!-- End 篩選 -->
<!-- 地圖 -->
<div class="search-map">
<div id="map"></div>
<div id="allmap" style="display: none;"></div>
<ul class="select-type">
<li>
<!-- <a <c:if test="${empty instrSort || instrSort == '所有'}">class="type-current"</c:if> href="javascript:void(0)" onclick="instrSortChange('所有')">所有</a> -->
<a th:class="${instrSort=='所有'}?'type-current'" href="javascript:void(0)" onclick="instrSortChange('所有')">所有</a>
<a href="javascript:void(0)" onclick="getLocation()" >附近</a>
<iframe id="iframeId" src="../searchV3/toGaoDeMap" width="1px" height="1px"
frameborder="0"></iframe>
</li>
<!-- <c:forEach items="${codeFieldList}" var="codeField" varStatus="i">
<li onclick="instrSortChange('${codeField.name}')"><a <c:if test="${instrSort == codeField.name }">class="type-current"</c:if> href="javascript:void(0)">${codeField.name}(${codeField.count})</a></li>
</c:forEach> -->
<li th:each="codeField:${codeFieldList}" th:onclick="'javascript:instrSortChange(\''+${codeField.name}+'\')'">
<a href="javascript:void(0)" th:class="${instrSort==codeField.name}?'type-current'"><span th:text="${codeField.name}"></span>(<span th:text="${codeField.count}"></span>)</a>
</li>
</ul>
</div>
<input type="hidden" th:value="${resultListJson}" id="resultListJson"/>
<!-- End 地圖 -->
<script src="/search/js/plugins/myPagination.js"></script>
<script src="/search/js/page/z-index-v3.js"></script>
<!-- 分頁 -->
<script>
$("#location").change(function(){
var opt=$("#location").val();
$("#area").val(opt);
$("#pageInput").val(0);
indexQuery();
});
function instrSortChange(obj){
if('所有'==obj){
$("#Latitude_longitude").val("");
$("#area").val("");
}
$("#instrSort").val(obj);
$("#pageInput").val(0);
indexQuery();
};
$(function(){
new Page({
id: 'page',
pageTotal: [[${pageTotal}]], //必填,總頁數pageTotal
pageAmount: 8, //每頁多少條
dataTotal: [[${totalSize}]], //總共多少條數據
curPage:[[${page}]], //初始頁碼,不填默認爲1
pageSize: 5, //分頁個數,不填默認爲5
//showPageTotalFlag:true, //是否顯示數據統計,不填默認不顯示
//showSkipInputFlag:true, //是否支持跳轉,不填默認不顯示
getPage: function (page) {
//獲取當前頁數
$("#pageInput").val(page);
indexQuery();
}
})
})
</script>
<!-- 地圖 -->
<script>
var latlon="";
var resultListJson=$("#resultListJson").val();
var markerArr = JSON.parse(resultListJson);
//解決八個點中重複問題
var count = 0;
for (var i = 0; i < markerArr.length; i++) {
if(i<3){
for (var j = 0; j < i; j++) {
if(markerArr[i].longitude == markerArr[j].longitude){
markerArr[i].longitude = parseFloat(markerArr[i].longitude) + 1/10000 +"";
}
}
}else if(i>=3 && i<5){
for (var j = 0; j < i; j++) {
if(markerArr[i].latitude == markerArr[j].latitude){
markerArr[i].latitude = parseFloat(markerArr[i].latitude) + 1/10000 +"";
}
}
}else if(i>=5 && i<7){
for (var j = 4; j < 6; j++) {
if(markerArr[i].longitude == markerArr[j].longitude){
markerArr[i].longitude = parseFloat(markerArr[i].longitude) -1/10000 +"";
}
}
}else{
for (var j = 0; j < 1; j++) {
if(markerArr[i].latitude == markerArr[j].latitude){
markerArr[i].latitude = parseFloat(markerArr[i].latitude)- 1/10000 +"";
}
}
}
}
var map; //Map實例
function map_init() {
map = new BMap.Map("map");
//第1步：設置地圖中心點，上海
latlon=$("#Latitude_longitude").val();
if(latlon.length==0){
var point = new BMap.Point(120.767413,31.3);
//第2步：初始化地圖,設置中心點座標和地圖級別。
map.centerAndZoom(point, 9);
}else{
var arr=latlon.split(" ");
var point = new BMap.Point(arr[0],arr[1]);
//第2步：初始化地圖,設置中心點座標和地圖級別。
map.centerAndZoom(point, 15);
}
//第3步：啓用滾輪放大縮小
map.enableScrollWheelZoom(true);
//第4步：向地圖中添加縮放控件
//第6步：向地圖中添加比例尺控件
//向地圖中添加比例尺控件
//map.addControl(ctrlSca);
//地圖、衛星、混合模式切換
//map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
//map.addControl(ctrlNav);
//第5步：向地圖中添加縮略圖控件
// var ctrlOve = new window.BMap.OverviewMapControl({
// anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
// isOpen: 1
// });
// map.addControl(ctrlOve);
// 定位
if(latlon.length!=0){
var arr=latlon.split(" ");
var maker = addMarker1(new window.BMap.Point(arr[0], arr[1]), 0);
}
//第7步：繪製點
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].longitude;
var p1 = markerArr[i].latitude;
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, markerArr[i], i);
}
}
function getLocation(){
setTimeout(function(){
var lonlat=document.getElementById('iframeId').contentWindow.document.getElementById('lon').value;
var arr=lonlat.split(",");
//座標轉換完以後的回調函數
var ggPoint = new BMap.Point(arr[0],arr[1]);
translateCallback = function (data){
if(data.status === 0) {
showMap(data.points[0].lat,data.points[0].lng);
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 3, 5, translateCallback)
}, 500);
}, 1000);
}
function getLine(lon,lat) {
$("#endPoint").val(lon+","+lat);
var search_channel=$(".list-header-project").text();
if(search_channel=="search_channel_fwxm"||search_channel=="服務項目"){
$("#search_channel").val("search_channel_fwxm");
}else if(search_channel=="search_channel_instr"||search_channel=="大型儀器"){
$("#search_channel").val("search_channel_instr");
}else if(search_channel=="search_channel_orgn"||search_channel=="服務機構"){
$("#search_channel").val("search_channel_orgn");
}
var lonlat=document.getElementById('iframeId').contentWindow.document.getElementById('lon').value;
$("#startingPoint").val(lonlat);
$("#planRoute").submit();
}
function showMap(lat,lon) {//自定義了一個在瀏覽器上顯示地理信息的函數
var str = "您當前位置的維度："+lat+"，經度："+lon;
$("#Latitude_longitude").val(lon+" "+lat);
$("#area").val("");
indexQuery();
//調用後臺查詢附近儀器
}
// 添加標註
function addMarker1(point, index) {
var myIcon = new BMap.Icon("/search/images/marker1.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(15, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
return marker;
}
function addMarker(point, index) {
var myIcon = new BMap.Icon("/search/images/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(15, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
return marker;
}
// 添加信息窗口
function addInfoWindow(marker, poi) {
//pop彈窗標題
var html = [];
html.push('<body>');
html.push('<div class="search-pop">');
html.push('<div class="s-pop-top">');
html.push('<div class="search-img drift-left">');
html.push('<img id="popImg" src="'+poi.image+'" onerror="nofind()" alt=""> ');
/* html.push('<img src="/search/images/img01.png" alt=""> th:if="${'+poi.image+'==null}"'); */
html.push('</div>');
html.push('<div class="s-infor drift-left">');
html.push('<h3>'+poi.instrName+'</h3>');
html.push('<ul>');
html.push('<li style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">所屬單位：<span>'+poi.companyName +'</span></li>');
html.push('<li>所屬省份：<span>'+poi.province+'</span></li>');
html.push('<li>所屬城市：<span>'+poi.city+'</span></li>');
html.push('<li>儀器類別：<span>'+poi.instrSort+'</span></li>');
html.push('<li>產地：<span>'+poi.placeProduce+'</span></li>');
html.push('<li>地址：<span>'+poi.address+'</span></li>');
html.push('</ul>');
html.push('</div>');
html.push('</div>');
html.push('<div class="s-pop-bottom">');
html.push('<ul>');
html.push('<input id="vieUrl" value="'+poi.videoUrl+'" type="hidden">');
html.push('<li><a href="/machine/machineDetail/'+poi.id+'" target="_blank"><img src="/search/images/icon01.png" alt="">查看詳情</a></li>');
html.push('<li><a href="#"><img src="/search/images/icon02.png" alt="">我要預定</a></li>');
html.push('<li><a href="#" onclick="getLine('+poi.longitude+','+poi.latitude+')"><img src="/search/images/icon03.png" alt="">查看路線</a></li>');
html.push('<li><a href="https://meeting.tenchong.com/2585" target="_blank"><img src="/search/images/icon04.png" alt="" >視頻連線</a></li>');
html.push('<li><a href="/pdf/web/viewer.html" target="_blank"><img src="/search/images/icon05.png" alt="">查看案例</a></li>');
html.push('<li class="video-btn"><a href="#" onclick="showVideos()"><img src="/search/images/icon06.png" alt="">視頻詳情</a></li>');
html.push('</ul>');
html.push('</div>');
html.push('</div>');
<!-- 視頻 -->
html.push('</body>');
var opts = {
width : 340, // 信息窗口寬度
height: 280, // 信息窗口高度
}
var infoWindow = new BMap.InfoWindow(html.join(""),opts);
var openInfoWinFun = function () {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener("mouseover", openInfoWinFun);
function func(){
alert(2);
}
return openInfoWinFun;
}
//異步調用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
<script>
autodivheight();
function autodivheight(){ //函數：獲取尺寸
//獲取瀏覽器窗口高度
var winHeight=0;
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//經過深刻Document內部對body進行檢測，獲取瀏覽器窗口高度
if (document.documentElement && document.documentElement.clientHeight)
winHeight = document.documentElement.clientHeight;
//DIV高度爲瀏覽器窗口的高度
document.getElementById("map").style.height= winHeight +"px";
}
window.onresize=autodivheight; //瀏覽器窗口發生變化時同時變化DIV高度
</script>
<script type="text/javascript">
function nofind(){
$("#popImg").attr("src","/search/images/yqdefault.png");
}
function indexNavPoint(obj) {
window.location.href=obj;
};
$(document).ready(function() {
$(".csj-nav li a").hover(function(){
$(this).find('div').show()
},function(){
$(this).find('div').hide();
});
})
</script>
<script type="text/javascript">
$(".i-pop-top h4").dotdotdot();
function showVideos(url){
var vr=$("#vieUrl").val();
$(".video-box").append('<video id="vio" width="865" height="490" controls></video>');
sourceDom = $("<source src=\""+ vr +"\">");
$(".video-box video").append(sourceDom);
$(".video-box").show();
$(".shade").fadeIn();
popup($('.video-box').fadeIn());
}
$(".shade").click(function(){
$('.video-box,.shade').fadeOut();
var ht=$(".video-box").html();
$(".video-box").empty();
})
function popup(popupName){
var _scrollHeight = $(document).scrollTop(),//獲取當前窗口距離頁面頂部高度
_windowHeight = $(window).height(),//獲取當前窗口高度
_windowWidth = $(window).width(),//獲取當前窗口寬度
_popupHeight = popupName.height(),//獲取彈出層高度
_popupWeight = popupName.width();//獲取彈出層寬度
_posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
_posiLeft = (_windowWidth - _popupWeight)/2;
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});
$(window).on('resize scroll', function() {
popupName.css('left', ($(window).width() - popupName.outerWidth()) / 2);
popupName.css('top', ($(window).height() - popupName.outerHeight()) / 2 + $(window).scrollTop());
});
}
</script>
</body>
</html>
效果圖以下：html
這裏點描繪出來，後臺也講了solr中取搜索附近，但附近須要獲取定位，這個定位我也爬過不少坑。上圖實現了附近功能，本人測試描繪出來的點也很準，哈哈哈，暴露了個人位置。下一章講怎麼獲取定位。前端
前端寫的不咋地，但願你們包涵java
相關文章
- 1. Android Studio實現百度地圖功能
- 2. 08-使用百度地圖接口實現附近搜索
- 3. 百度地圖入門一：獲取祕鑰和基本地圖功能實現
- 4. 百度地圖SDK地圖學習——實現定位功能
- 5. 經過百度echarts實現數據圖表展現功能
- 6. 百度地圖三維效果實現
- 7. 百度地圖web api的部分簡單功能的實現
- 8. 實現百度地圖導航Demo的語音播報功能
- 9. 百度地圖路線規劃功能的實現
- 10. 百度定位附近位置功能
- 更多相關文章...
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • 現實生活中的 XML - XML 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章