类似百度地图 关键字检索之后 能够左右滑动 的路线列表

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量125 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/1469756/blog/518838
版权

最近做地图开发，界面效果模仿百度地图，自定义了一个自适应比较好的 左右滑动组件，滑动30%距离才会生效   

直接上代码：

依赖 jquery.min.js    bootstrap.min.css   underscore-min.js

  

html +js 文件如下：


<!DOCTYPE html>

<html>

<head>

<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=no">

<title>项目地图</title>

<link href="bootstrap.min.css" rel="stylesheet">

<style>


body {

    font-family:"微软雅黑";

    font-size:12px;

overflow:hidden;

}



#header span[class="pull-right"] {

display:inline-block;

margin-top:-30px;

}


h2 {

text-align:center;

}


#toolsBar {

position:absolute;

z-index:15;

margin-top:20px;

}



#mapBox {

    width:100%;

   /*  height:500px; */

    position:relative;

}

#map {

    height:100%;

    position:absolute;

    top:0;

    left:1px;

    right:1px;

    bottom:0;

}


#mapList {

left :0;

width:100%;

height:114px;

    position:absolute;

margin-left:1px;

    margin-right:1px;

    bottom:2px;

overflow:hidden;

}


</style>


</head>

<body>

<div id="pageMiddle">

        <div class="container" id="header">

        <div class="row">

           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

<h2> 项目地图</h2>

<span class="pull-right"><a href="constructionlist.html">列表</a></span>

</div>

        </div>

            <div id="toolsBar" class="clearfix">

                <div class="pull-left">

                    <input type="search" id="keyword" class="input-large search-query" placeholder="输入检索关键字">

                    <span class="btn btn-primary" id="searchBtn">搜索</span>

                </div>

               

            </div>

        </div> <!-- /container -->

    </div>


    <div id="mapBox" >

        <div id="map" class="pull-left"></div>

    </div>

<div id="mapList">

</div>


</body>

<script type="text/javascript" src="jquery.min.js"></script>

<script src="underscore-min.js"></script>


<script id="data-list-template" type="text/template">

<%

var mapListWidth = $('#mapList').width();

$('#mapList').css({width: mapListWidth * constructionlstVO.length + 'px'});

_.each(constructionlstVO, function(item,index) {

    marginLeft = ((50)/100*mapListWidth+'px');

width = (90)/100*mapListWidth+'px';

left = (-45+(index)*100)/100*mapListWidth+'px';

%> 

<div class="panel panel-default" 

style="position:absolute;margin-left:<%=marginLeft%>;width:<%=width%>;left:<%=left%>">

<div class="panel-heading">

<h3 class="panel-title">

<%=(index + 1) + "、" + item.constructionName%>

</h3>

</div>

<div class="panel-body">

<div class="col-xs-12">

<label for="name">施工单位:</label>

<span class="field-value">

<%=item.departmentName%>

</span>

</div>

<div class="col-xs-12">

<label for="name">项目经理:</label>

<span class="field-value">

<%=item.projectManager%>&nbsp;&nbsp;&nbsp; <%=item.phoneNumber%>

</span>

</div>

</div>

</div>

<%});%> 

</script>


<script type="text/javascript">

<!--

var constructionlstVO = [{

"constructionName" : "顺景变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "14524522547"

},{

"constructionName" : "景发变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "香丽变电站施工sdsdsd项目部",

"departmentName" : "广西大马工程sdsdfsdsdsdfsdsdsdfsdsdsdsds有限公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "南宁A区变电站施工项目部",

"departmentName" : "广西大马工程有限公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "南宁B区变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "南宁C区变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "南宁D区变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "景发A变电hsoensk站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "景发B变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

},{

"constructionName" : "景发C变电站施工项目部",

"departmentName" : "广西泗洪变电公司",

"projectManager" : "张大胆",

"phoneNumber" : "18645525203"

}];




/**

 * 列表信息拖动事件

 * @param {Object} event

 */

var panelDrag = {

elementId:-1,

iCount:0,

objDiv : null,

currentX : -1,

startX : -1,

touchSatrtFunc : function(event){

var touch = event.touches[0]; //获取第一个触点

        var x = Number(touch.pageX); //页面触点X坐标

        panelDrag.startX = x;

        panelDrag.currentX = x;

},

touchMoveFunc : function(event){

var touch = event.touches[0]; //获取第一个触点

        var x = Number(touch.pageX); //页面触点X坐标

var size = $("#"+panelDrag.elementId+">div").length;

var width = $("#"+panelDrag.elementId).width();

$("#"+panelDrag.elementId+">div").each(function(index,item){

if (panelDrag.startX == panelDrag.currentX){

this.style.left =  (Number(this.style.left.replace('px','')) + (x -panelDrag.startX)) +"px"; 

} else {

this.style.left =  (Number(this.style.left.replace('px','')) + (x -panelDrag.currentX)) +"px"; 

}

});

panelDrag.currentX = x;

},

touchEndFunc : function(event){

var size = $("#"+panelDrag.elementId+">div").length;

var width = $("#"+panelDrag.elementId).width();

var dstance = (panelDrag.currentX -panelDrag.startX) > 0 ? width/size :-1* width/size;

//活动比例超过30%，即成功

if (Math.abs(panelDrag.currentX -panelDrag.startX)*size/width > 0.3){

$("#"+panelDrag.elementId+">div").each(function(index,item){

this.style.left =  (Number(this.style.left.replace('px','')) - (panelDrag.currentX -panelDrag.startX) + dstance) +"px"; 

});

} else {

$("#"+panelDrag.elementId+">div").each(function(index,item){

this.style.left =  (Number(this.style.left.replace('px','')) - (panelDrag.currentX -panelDrag.startX)) +"px"; 

});

}

/**

* 防止出界

*/

var firstX =  Number($("#"+panelDrag.elementId+">div")[0].style.left.replace('px',''));

if(firstX < (width*(-1-0.45/size)) || firstX > (width*-0.45/size)){

$("#"+panelDrag.elementId+">div").each(function(index,item){

this.style.left =  (Number(this.style.left.replace('px','')) - dstance) +"px"; 

});

}

  

},

eventBind : function(elementId){

if (document.getElementById(elementId)){

document.body.addEventListener('touchmove', function(event) { 

event.preventDefault(); 

}, false);

panelDrag.elementId = elementId;

panelDrag.objDiv = document.getElementById(elementId);

panelDrag.objDiv.addEventListener('touchstart', panelDrag.touchSatrtFunc, false);

   panelDrag.objDiv.addEventListener('touchmove', panelDrag.touchMoveFunc, false);

   panelDrag.objDiv.addEventListener('touchend', panelDrag.touchEndFunc, false);

} else {

console.log("元素不存在 id--" + elementId);

}

}

};





   $("#mapList").append(_.template($('#data-list-template').html()));


   panelDrag.eventBind("mapList");


//-->

</script>


</html>


转载于:https://my.oschina.net/u/1469756/blog/518838

chuomingzhun0820
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 仿美团骑手地图_Android 开发：仿美团地址选择
weixin_39572972的博客
12-19 571
最近做了这个功能，分享一下，用的是百度地图api，和美团外卖的地址选择界面差不多，也就是可以搜索或者滑动地图展示地址列表给用户选择，看下效果图先。文章重点展示地图并定位到“我”的位置滑动地图获取周边poi(逆地理编码)搜索框输入查询poi(POI检索)前言这里先提一下，我们要选择的地址信息其实是POI(Point of Interest)，即“兴趣点”。在地理信息系统中，一个POI可以是一栋房子、...
android 仿美团骑手地图_Android仿美团地址选择
weixin_39709674的博客
12-19 921
最近做了这个功能，分享一下，用的是百度地图api，和美团外卖的地址选择界面差不多，也就是可以搜索或者滑动地图展示地址列表给用户选择，看下效果图先。文章重点1、展示地图并定位到“我”的位置2、滑动地图获取周边poi(逆地理编码)3、搜索框输入查询poi(POI检索)前言这里先提一下，我们要选择的地址信息其实是POI(Point of Interest)，即“兴趣点”。在地理信息系统中，一个POI可以...
仿百度地图搜索+mock数据展示
12-26
仿百度地图搜索查询框+mock数据基本展示+ js触发mark定位。
仿百度地图
Yukidada的博客
12-27 963
1.运行效果图 2.代码 MainActivity.javapackage cn.edu.bzu.holyroyalmap; import java.util.List; import com.baidu.mapapi.map.BaiduMap; import com.baidu.mapapi.map.BitmapDescriptor; import com.baidu.mapap
仿照百度地图搜索功能（在线建议）Demo
05-24
仿照百度地图搜索功能，输入搜索地点，在ListView展示返回结果。（Studio版本）
Android 百度地图搜索框实现,仿百度地图街景实现
weixin_39968410的博客
05-26 854
使用过百度地图的同学知道，它有个街景功能，可以看到许多地方的实景。这里就其街景内容的实现，进行下学习。在百度地图SDK的官网上可以看到，百度对开发者提供了很多相干的内容，方便我们进行学习。关于SDK的使用方法，包括jar包导入，*.so 动态库的添加位置及AndroidManifest文件的配置不做为我们这里讨论的内容，官方文档已介绍的很详细，不做无聊的搬运工。效果图这里我们首先预览下，今天终究要...
android 百度地图滑动获屏幕中心坐标和显示当前地址信息
01-10
android 百度地图滑动获屏幕中心坐标和显示当前地址信息
Android仿美团地址选择
06-09
用的是百度地图api，和美团外卖的地址选择界面差不多，也就是可以搜索或者滑动地图展示地址列表给用户选择。详细效果请看：https://blog.csdn.net/xch_yang/article/details/102803491 实现的功能主要包括两个操作...
安卓仿美团、饿了么实现选择地址搜索检索
一个成长中的猿人的博客
05-24 798
百度sdk实现仿美团、饿了么选择收货地址，带搜索及poi检索列表首先去百度开放平台申请应用AK,然后放入自己的项目中。导入百度sdk的引用资源配置定位及检索需要的权限在自定义application初始化直接代码实现设置编辑框搜索SuggestionSearch整个功能差不多已经完结，可以完成搜索、滑动地图检索poiDemo链接 首先去百度开放平台申请应用AK,然后放入自己的项目中。 android:name="com.baidu.lbsapi.API_KEY"
一种用于人机对话的神经检索模型
现在我们已经能够在Web上收集到海量的会话数据，并将其组织起来，组成一个人机会话系统。由于可用的Web资源的多样性一个人，一个人，一个人，对于查询，基于检索的会话系统将搜索适当的回复，进行相关性排名，然后...
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
2017年最牛逼的分类Android项目源码免费一次性打包下载！
源码分享的博客
03-29 2万+
之前发过一个帖子，但是那个帖子有点问题我就重新发一个吧，下面的源码是我从今年开始不断整理源码区和其他网站上的安卓例子源码，目前总共有810套左右，根据实现的功能被我分成了100多个类，总共接近2.5G，还在不断更新。初学者可以快速方便的找到自己想要的例子，大神也可以看一下别人的方法实现。虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的，但是既然这些例子是来自于社区那就让他们免费回归社区吧，（...
百度地图滑动后获取屏幕的中心点百度坐标
yangxf
03-03 7323
//地图状态改变相关接口 mBaiduMap.setOnMapStatusChangeListener(new OnMapStatusChangeListener() { @Override public void onMapStatusChangeStart(MapStatus arg0) { // 手势操作地图，设置地图状态等操作导致地图状态开始改变。 }
百度地图搜索功能的实现
灵活大胖子HDG 的博客
01-19 5357
适用任何语言 效果图： HTML代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head runat=&quot;server&quot;&amp;gt; &amp;lt;title&amp;gt;百度地图搜索&a
带搜索框的百度地图html
liujan511536的专栏
11-23 5722
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;} #l-map{height:300px;width:100%;} #r-result{width:100%;} 关键字输入提示词条 请输入: // 百度地图API功能 function G(id)
百度地图(二) - 模仿百度地图搜索框
风与蒲公英
08-31 4051
百度地图(二) - 模仿百度地图搜索框1 模仿百度地图搜索框 1 在activity_Main在添加 TextView <TextView android:id="@+id/tvSeek" android:layout_marginTop="20dp" android:layout_marginRight="20dp" android
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 518
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
vue 实现百度地图关键字检索并自定义结果列表
05-24
要实现百度地图关键字检索并自定义结果列表，可以按照以下步骤进行： 1. 引入百度地图 JavaScript API，并加载地图。 2. 在页面中添加一个输入框和一个按钮，用于输入关键字和触发检索。 3. 在按钮的点击事件中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值