百度云盘  传送门  密码 :ko30

高德地图api效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>jQuery高德地图api开发实例代码</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=c93e1e293e5b1c3dc581f3ff633144d3&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Riding"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="myPageTop">
<a href="javascript:void(0);" id="show">
Gary_点击试试———路线工具(展开/收缩)
</a>
<div class="pageShow">
<h3>搜索地址</h3>
<input id="tipinput" placeholder="模糊地址搜索">
<h3>搜索行车路径</h3>
<input id="star" placeholder="行车开始地址">
<span>—&nbsp;—</span>
<input id="end" placeholder="行车结束地址">
<span>—&nbsp;—</span>
<a id="car" href="javascript:void(0);">
点击搜索
</a> <h3>搜索骑行路径</h3>
<input id="cStar" placeholder="骑行开始地址">
<span>—&nbsp;—</span>
<input id="cEnd" placeholder="骑行结束地址">
<span>—&nbsp;—</span>
<a id="riding" href="javascript:void(0);">
点击搜索
</a> <h3>搜索步行路径</h3>
<input id="wStar" placeholder="步行开始地址">
<span>—&nbsp;—</span>
<input id="wEnd" placeholder="步行结束地址">
<span>—&nbsp;—</span>
<a id="walk" href="javascript:void(0);">
点击搜索
</a>
<div style="margin:20px 0;">
<a id="box" href="javascript:void(0);">
鼠标右键拖取选框放大地图
</a>
<a id="meter" href="javascript:void(0);">
测量距离
</a>
</div>
</div>
</div>
<div id="container"></div>
<div id="panel"></div>
<script src="js/main.js"></script> </body>
</html>

index.html

#myPageTop{
position: absolute;
z-index:10;
top:0;
left:50%;
transform: translateX(-60%);
background: #fff;
width:70%;
padding:20px;
}
#myPageTop a{
display: inline-block;
text-align: center;
padding:10px 20px;
color:#fff;
background: #ff950e;
text-decoration:none;
}
#myPageTop #show{
display: block;
}
#myPageTop input{
font-size:14px;
padding:6px 8px;
border:1px solid #ccc;
outline:none;
}
.pageShow h3{
margin:20px 0 10px;
}
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
.infowindow-content{
padding:12px 8px;
color:#fff;
background:#ccc;
} h3{
font-family: "Microsoft YaHei";
!important;
}
.pageShow{
display:none;
}

style.css

实现过程

CSS

页面顶端

#myPageTop{
position: absolute;
z-index:10;
top:0;
left:50%;
transform: translateX(-60%);
background: #fff;
width:70%;
padding:20px;
}

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面  传送门

transform:translateX(x) 定义转换,只是用 X 轴的值

提交按钮

#myPageTop input{
font-size:14px;
padding:6px 8px;
border:1px solid #ccc;
outline:none;
}

outline:设置 4 个边框的样式

  outline-color 规定边框的颜色

  outline-style 规定边框的样式
  outline-width 规定边框的宽度
 
    overflow-y: auto;

overflow-y: 裁剪 div 元素中内容的左/右边缘

  auto 如果溢出框,则应该提供滚动机制

visible    不裁剪内容,可能会显示在内容框之外
hidden 裁剪内容 - 不提供滚动机制
scroll 裁剪内容 - 提供滚动机制
auto 如果溢出框,则应该提供滚动机制
no-display 如果内容不适合内容框,则删除整个框
no-content 如果内容不适合内容框,则隐藏整个内容

overflow-y: 参数

h3{
font-family: "Microsoft YaHei";
!important;
}

!important : 样式表条目 提升指定样式规则的应用优先权

  通说说法:!important 是最高优先级的 ‘!’就是强调的意思。important!

DOM

调用高德地图api

<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=c93e1e293e5b1c3dc581f3ff633144d3&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Riding"></script>

搜索路径

<div class="pageShow">
<h3>搜索地址</h3>
<input id="tipinput" placeholder="模糊地址搜索">
<h3>搜索行车路径</h3>
<input id="star" placeholder="行车开始地址">
<span>—&nbsp;—</span>
<input id="end" placeholder="行车结束地址">
<span>—&nbsp;—</span>
<a id="car" href="javascript:void(0);">
点击搜索
</a> <h3>搜索骑行路径</h3>
<input id="cStar" placeholder="骑行开始地址">
<span>—&nbsp;—</span>
<input id="cEnd" placeholder="骑行结束地址">
<span>—&nbsp;—</span>
<a id="riding" href="javascript:void(0);">
点击搜索
</a> <h3>搜索步行路径</h3>
<input id="wStar" placeholder="步行开始地址">
<span>—&nbsp;—</span>
<input id="wEnd" placeholder="步行结束地址">
<span>—&nbsp;—</span>
<a id="walk" href="javascript:void(0);">
点击搜索
</a>
<div style="margin:20px 0;">
<a id="box" href="javascript:void(0);">
鼠标右键拖取选框放大地图
</a>
<a id="meter" href="javascript:void(0);">
测量距离
</a>
</div>
</div>
    <a id="car" href="javascript:void(0);">
点击搜索
</a>

href="#"与href="javascript:void(0)"的区别

  # 包含了一个位置信息,默认的锚是#top 也就是网页的上端

  而javascript:void(0), 仅仅表示一个死链接

  在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

  如果你要定义一个死链接请使用 javascript:void(0)

高德地图开放平台:传送门

JS框架_(JQuery.js)高德地图api的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  3. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  4. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  5. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  6. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  7. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  8. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  9. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. Linux cat命令详解(连接文件并打印到标准输出设备上)

    cat:连接文件并打印到标准输出设备上 一.命令格式: cat [-AbeEnstTuv] [--help] [--version] filename 二.参数说明: -n 或 --number:由 ...

  2. 封装H5ToApp方法

    方法一: 新建个 Android studio 项目,用 webview 指定访问你的页面 方法二: 使用工具 cordova  附上地址:http://cordova.axuer.com/docs/ ...

  3. java实现RPC

    一,服务提供者 工程为battercake-provider,项目结构图如下图所示 1.1 先创建一个“卖煎饼”微服务的接口和实现类 package com.jp.service; public in ...

  4. python多线程之_thread

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  5. DockerScan:Docker安全分析&测试工具

    DockerScan:Docker安全分析&测试工具 今天给大家介绍的是一款名叫DockerScan的工具,我们可以用它来对Docker进行安全分析或者安全测试. 项目主页 http://gi ...

  6. ELK监控交换机日志

    一.首先部署logstash监控UDP514端口,新建一个配置文件cisco.conf 交换机是通过配置rsyslog服务器来将日志发送到日志服务器的,所以需要在logstash上配置rsyslog监 ...

  7. ftp上传下载功能实现

    该程序分为客户端和服务端,目前已经实现以下功能: 1. 多用户同时登陆 2. 用户登陆,加密认证 3. 上传/下载文件,保证文件一致性 4. 传输过程中现实进度条 5. 不同用户家目录不同,且只能访问 ...

  8. ubuntu16.04安装cuDNN

    cudnn的安装非常简单 (1)下载安装文件 按需求下载cudnn的安装文件:https://developer.nvidia.com/rdp/cudnn-archive Tar File的下载如下图 ...

  9. DeepFM: A Factorization-Machine based Neural Network for CTR Prediction (2017)论文要点

    论文链接: https://arxiv.org/pdf/1703.04247.pdf FM原理参考: Factorization Machines with libFM 论文阅读  https://w ...

  10. touch cyusbConfig.cmake

    touch cyusbConfig.cmake cmake文件丢失,与其解决问题,不如临时建立一个临时文件