JS框架_(JQuery.js)高德地图api

百度云盘　　传送门　　密码 :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的更多相关文章

JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
JS框架_(JQuery.js)圆形多选菜单选项
百度云盘传送门密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘传送门密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘传送门密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
JS框架_(JQuery.js)文章全屏动画切换
百度云盘传送门密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘传送门密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
JS框架_(JQuery.js)点赞按钮动画
百度云盘传送门密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘传送门密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
JS框架_(JQuery.js)上传进度条
百度云盘传送门密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

使用php过滤emoji表情
/** * 过滤字符串中表情 * @param $str string 昵称 * @return string */ public function filterEmoji($str) { $str ...
java native本地方法详解（转）
文章链接出处: 详解native方法的使用自己实现一个Native方法的调用 JNI 开始本篇的内容之前,首先要讲一下JNI.Java很好,使用的人很多.应用极广,但是Java不是完美的.Java ...
Select2的远程数据操作
一.概述如果下拉列表框中的内容太多,最好是使用Select2的远程数据进行筛选. 二.参考文献 https://select2.github.io/examples.html#data-ajax h ...
LaTeX pdf转eps格式
使用GSview对pdf 进行 eps 转换 1.准备好PDF文件例如:f1.pdf 2.打开GSview,转换f1.pdf成为f1.ps 打开GSview,File-->Convert--& ...
107、如何配置 Health Check ？（Swarm14）
参考https://www.cnblogs.com/CloudMan6/p/8053323.html 容器状态是UP的,那应用就是健康的吗? 不一定 Docker 只能从容器启动进程的返 ...
关于CSRF 和 csrftoken
CSRF 虽然利用了session验证机制的漏洞,一般使用加密token的方式防御,但是其本身和session以及JWT token没有直接联系. 描述 CSRF利用用户正常登录产生的cookie,利 ...
yii的多表查询
获取用户发布消息的指定消息id的总和点赞数 Yii $productIds = ['2260', '2262', '2263', '2268', '2269']; $plSql = Like::fin ...
ES6入门之Proxy
1. 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程. 1.1 理解 Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问 ...
jQuery 遍历 - 后代
向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() jQuery children() 方法 children() 方法返回被选元素的 ...
RouterOS Firewall v6 流程图
1. Firewall v5和Firewall v6对比图 2.Firewall v6的流程图

JS框架_(JQuery.js)高德地图api

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

随机推荐

热门专题