Repository navigation
Expand file tree
/
Copy pathmap.html
More file actions
177 lines (163 loc) · 15.2 KB
/
Copy pathmap.html
File metadata and controls
177 lines (163 loc) · 15.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/tabar-style.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
<!-- 在线图标样式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<!--百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=T9X7pGGuOkDzpks7QCxrbPHgWYPywp3d"></script>
<script src="js/map.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!-- 搜索框-->
<div id="header" onclick="searchPOI()">
<input id="header-text" placeholder="请输入关键字" />
</div>
<!-- 检索结果框 -->
<div id="searchResultPanel"></div>
<!--地图容器-->
<div id="map" class="map"></div>
<!-- 侧边栏 -->
<div class="layer" id="layer" data-index="1" onclick="convertTraffic()">
<span class="fa fa-road"></span>
<br />
<span class="layer-text">路况</span>
</div>
<!-- 卫星图 -->
<div class="Earthlayer" id="Earthlayer" data-index="1" onclick="convertEarth()">
<span class="fa fa-globe"></span>
<br />
<span class="layer-text">卫星图</span>
</div>
<!-- 周边推荐列表 -->
<div id="nearPOI" class="nearPOI">
<div class="min-block" id="food_part">
<span id="food" value="美食" onclick="SearchFood()">
<svg t="1617977313284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2035" width="48" height="48"><path d="M512 1022.39784391c-281.8863104 0-510.39784391-228.51735438-510.39784391-510.40133689S230.11252451 1.60215609 512 1.60215609 1022.39784391 230.11252451 1022.39784391 511.99650702 793.8863104 1022.39784391 512 1022.39784391zM806.4898048 513.87335111c-21.3589925-108.71488626-101.44619179-196.16043008-205.79264285-228.45098894 0.68460544-4.47089323 1.37153991-8.94993635 1.37153992-13.6094447 0-49.73984882-40.32768797-90.06986581-90.06753678-90.06986581-49.74916381 0-90.07335765 40.33001586-90.07335766 90.06986581 0 4.65950834 0.69042745 9.13855147 1.37153991 13.6094447-104.34295808 32.29055886-184.43132245 119.73610269-205.79264284 228.45098894-20.26921301 4.39288491-35.76714354 21.58137344-35.76714354 43.16507478 0 24.86817792 20.16326201 45.03493291 45.03493291 45.0349329l570.44519708 0c24.8716709 0 45.03493291-20.16675499 45.03493291-45.0349329C842.25694834 535.45355947 826.75901781 518.26623602 806.4898048 513.87335111zM812.23327175 662.11372487L211.76556317 662.11372487c-16.58189027 0-30.02367659 13.44411534-30.02367659 30.02600562 0 16.58189027 13.44178631 30.02600562 30.02367659 30.02600562l600.46770858 0c16.58189027 0 30.02367659-13.44411534 30.02367659-30.02600562C842.25694834 675.55784021 828.81516203 662.11372487 812.23327175 662.11372487zM512.00232903 271.81291634c-20.37632797 0-40.20077909 2.22729671-59.4337701 6.10090553-0.20724509-2.03868046-0.61591211-4.0144896-0.6159121-6.10090553 0-33.16378055 26.88590165-60.04386019 60.04968106-60.0438602 33.16145152 0 60.04386019 26.88007965 60.0438602 60.0438602 0 2.08641707-0.40517518 4.06222507-0.61591211 6.10090553C552.20077909 274.04021305 532.37399893 271.81291634 512.00232903 271.81291634zM459.19106958 354.74914645c1.47166891-0.49249735 2.69301419-0.73234205 3.66287189-0.73234204 5.86921187 0 10.89197966 2.09573091 15.05084189 6.29534378 4.16701213 4.19379086 6.25110016 9.24450247 6.25110016 15.16144982 0 3.44980594-0.73583502 6.65278237-2.20983182 9.60194105-1.47166891 2.95381675-3.55226397 5.41979307-6.24760719 7.40724508-2.69301419 1.98395904-5.50012928 3.21229027-8.42716728 3.68965063-13.21591353 3.93881031-25.56791922 9.24100949-37.05834724 15.89495581-11.49275591 6.65278237-22.01565525 14.54088078-31.56403882 23.65265351-9.55071261 9.12108771-17.74734905 19.09793223-24.59224064 29.95149028-0.98499357 2.45549853-2.45549853 4.68046621-4.4103498 6.64696035-1.96067328 1.96998713-4.15769714 3.45213497-6.60504576 4.44644238-2.44036267 0.99430741-5.1345408 1.48913379-8.07671467 1.4891338-5.87270371 0-10.76390798-1.97231616-14.67244657-5.91112647-3.91785245-3.94463118-5.87503275-8.86843506-5.87503275-14.79004046 0-4.42548565 1.22251037-8.36778894 3.66287189-11.82923776l0-0.03958557c13.21591353-21.68615936 29.97593998-40.41151715 50.28008164-56.18305821 20.3053056-15.77154105 42.93920199-27.10828146 67.89470208-34.01604437C457.24320313 354.99830499 458.21888285 354.74914645 459.19106958 354.74914645z" fill="#f4ea2a" p-id="2036"></path></svg>
</span>
<span>美食</span>
</div>
<div class="min-block" id="viste_part">
<span id="viste" value="景点" onclick="SearchViste()">
<svg t="1617977479301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3140" width="48" height="48"><path d="M511.999488 4.375657C231.605404 4.375657 4.375146 231.66629 4.375146 512c0 280.33371 227.229235 507.623319 507.624343 507.623319 280.396131 0 507.624343-227.28961 507.624343-507.623319C1019.623831 231.66629 792.39562 4.375657 511.999488 4.375657zM228.444411 800.142559c0 0 66.9846-169.291684 87.24811-226.670509 20.263509-57.504692 59.177797-146.984632 112.220874-64.198138 52.919257 82.787518 101.253078 241.543242 101.253078 241.543242l12.515035 50.687426L228.444411 800.142559zM610.215394 734.085074l-3.717671-15.368012c0 0-42.756803-140.415007-96.66662-251.085572 38.046524-106.457614 90.099041-248.235664 105.465007-269.427312 25.159006-34.452673 96.297206-90.346681 158.882614 98.897428 78.4487 236.710167 120.521934 436.982446 120.521934 436.982446L610.215394 734.084051z" fill="#1afa29" p-id="3141"></path></svg>
</span>
<span>景点</span>
</div>
<div class="min-block" id="supermarket_part">
<span id="supermarket" value="超市" onclick="SearchSupermarket()">
<svg t="1617977576781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4640" width="48" height="48"><path d="M496.46554075 381.77754075h14.56355555v14.56355555c0.48545185 5.33997037-2.18453333 8.00995555-8.00995555 8.00995555h-5.82542223v18.93262223h15.29173333c16.99081482 0.48545185 25.2434963-8.00995555 24.75804445-25.48622223v-35.6807111h-83.61908148v19.6608h16.74808888c0.48545185 13.1072-5.33997037 22.81623703-17.47626667 29.1271111V428.25955555c29.4912-6.79632592 44.05475555-22.20942222 43.56930372-46.4820148z" p-id="4641" fill="#1296db"></path><path d="M456.41576297 427.53137778v64.68645925h54.49197036c16.99081482 0.9709037 25.00077037-7.76722963 24.02986667-26.2144v-38.47205925h-78.52183703z m45.14702221 45.14702222h-18.93262221v-25.48622222H509.57274075v16.74808889c0.48545185 6.31087408-2.18453333 9.22358518-8.00995557 8.73813333zM662.24734815 394.15656297h-33.49617778v11.65084444h-56.6765037v100.36717037h30.58346666v-79.25001481h26.2144v96.72628148h33.49617778v-96.72628148h27.67075556v49.39472592c0.48545185 5.82542222-2.18453333 8.73813333-8.00995556 8.73813333h-9.46631111v20.38897778h19.6608c19.90352592 0.48545185 29.61256297-8.73813333 29.12711111-27.67075555v-71.96823704H662.49007408v-11.65084444z" p-id="4642" fill="#1296db"></path><path d="M436.87632592 499.49961482v-29.12711112h13.83537778v-19.6608h-13.83537778v-19.6608h13.1072v-20.38897778h-19.6608v-20.38897777H447.67762963v-19.6608h-17.47626666v-16.01991112h-28.39893334v16.01991112h-21.11715555v19.6608h21.11715555v20.38897777h-26.2144v20.38897778h33.49617778v54.49197038l-3.64088889-3.6408889-1.45635555-1.45635555v-40.04977778h-23.30168889v39.20023704c0.48545185 11.65084445-1.69908148 19.6608-6.5536 24.02986666v19.6608c11.65084445-5.33997037 19.6608-11.40811852 24.02986667-18.20444444 11.16539259 10.19448889 26.45712592 15.29173333 45.75383703 15.29173334H543.55437037v-19.6608h-88.59496296c-6.79632592 0.24272592-12.74311111-0.24272592-18.08308149-1.21362963zM663.7037037 355.56314075h-37.13706667v13.83537777h-63.95828148v21.11715556h165.78180742v-21.11715556H663.7037037z" p-id="4643" fill="#1296db"></path><path d="M510.66500741 15.01866667c-274.52302222 0-497.1026963 222.57967408-497.1026963 497.1026963 0 274.52302222 222.57967408 497.1026963 497.1026963 497.10269628 274.52302222 0 497.1026963-222.57967408 497.10269629-497.10269628 0-274.52302222-222.57967408-497.1026963-497.10269629-497.1026963z m-87.86678519 784.00474074c-28.64165925 0-51.82198518-23.18032592-51.82198519-51.82198519s23.18032592-51.82198518 51.82198519-51.82198519 51.82198518 23.18032592 51.82198519 51.82198519-23.18032592 51.82198518-51.82198519 51.82198519z m256.80402963 0c-28.64165925 0-51.82198518-23.18032592-51.82198518-51.82198519s23.18032592-51.82198518 51.82198518-51.82198519 51.82198518 23.18032592 51.82198518 51.82198519-23.18032592 51.82198518-51.82198518 51.82198519z m124.39703704-470.8882963l-49.51608889 218.69605926c-2.3058963 10.43721482-12.98583703 18.93262222-23.66577778 18.93262222H366.36444445l5.46133333 44.9042963h357.89937777c12.74311111 0 23.30168889 9.58767408 23.3016889 21.35988148 0 11.77220741-10.43721482 21.35988148-23.3016889 21.35988148H362.72355555c-1.57771852 0.48545185-3.2768 0.72817778-5.09724444 0.72817778h-4.36906666c-10.67994075 0-20.38897778-8.61677037-21.72397037-19.29671111l-44.41884445-366.27342222h-46.48201481c-12.74311111 0-23.30168889-9.58767408-23.3016889-21.35988148 0-11.77220741 10.43721482-21.35988148 23.3016889-21.35988149h55.46287407c1.57771852-0.48545185 3.39816297-0.72817778 5.21860741-0.72817778h4.36906667c10.67994075 0 20.38897778 8.61677037 21.72397036 19.29671112l7.88859259 64.92918518h453.65475556c10.67994075-0.12136297 17.47626667 8.37404445 15.04900741 18.81125926z" p-id="4644" fill="#1296db"></path></svg>
</span>
<span>超市</span>
</div>
<div class="min-block" id="hospital_part">
<span id="hospital" value="医院" onclick="SearchHospital()">
<svg t="1617977691325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10878" width="48" height="48"><path d="M511.2 0C793.6 0 1022.432 228.864 1022.432 511.2c0 282.368-228.864 511.232-511.232 511.232C228.864 1022.4 0 793.568 0 511.2 0 228.864 228.864 0 511.2 0z m59.008 255.616h-235.968c-32 0-61.824 28.48-59.36 56.128l0.384 396.384H235.936v58.688h550.56V708.16h-19.68v-275.552c0-32.96-10.432-59.104-30.176-59.008-13.184 0.064-29.312 0.064-48.48 0V708.16h-58.976V314.592c0-30.08-20.672-57.024-55.488-58.88l-3.52-0.096z m-91.84 362.368v7.2c-2.304 7.392-4.96 15.232-8.032 23.52 4.768 8.192 7.328 15.232 7.744 21.248 0 4.224-0.768 7.296-2.368 9.152-2.464 2.272-6.592 3.424-12.608 3.52l-2.816-8.704v22.88h-8.96v-78.816h27.04z m50.464 36.64v8.64h-13.76v20.608c0 2.272 0.64 3.424 1.856 3.424h2.304c0.64 0 1.152-0.352 1.6-0.896 0.512-0.704 0.864-4.224 1.024-10.56l8.384 2.816c-0.704 8.288-1.664 13.216-2.72 14.624-1.248 1.312-3.36 2.016-6.368 2.112h-7.136c-2.624 0-4.576-0.864-5.792-2.624a10.24 10.24 0 0 1-2.24-6.72v-22.816h-5.696c-0.704 8.736-2.112 15.264-4.32 19.488a36.672 36.672 0 0 1-14.08 13.824l-5.92-7.68c5.44-2.976 9.44-6.4 11.712-10.464 1.856-3.264 3.104-8.288 3.616-15.168h-10.752v-8.64h48.288z m-91.712-36.64v8.704h-62.016v58.304h64.832v8.832h-73.728v-75.84h70.912z m-46.144 9.504l8.352 2.272c-0.608 1.856-1.216 3.52-1.824 5.12h32.96v8.384h-17.92v3.424c-0.064 1.92-0.256 3.776-0.512 5.536h23.584v8.64h-25.344a35.936 35.936 0 0 1-5.216 10.4c-4.384 5.632-11.52 9.952-21.472 13.024l-5.024-7.744c9.696-3.008 16.192-6.72 19.648-11.2a27.712 27.712 0 0 0 2.464-4.48h-21.504v-8.64h23.968c0.32-1.824 0.512-3.68 0.608-5.536v-3.424h-10.56a38.56 38.56 0 0 1-7.328 8.544l-6.784-6.272c5.568-5.12 9.536-11.2 11.904-18.048z m22.464 36.288c8.096 3.52 15.424 7.744 22.08 12.8l-4.992 7.648a96.48 96.48 0 0 0-21.664-13.664z m55.936-37.184h-9.088v46.784c1.92 0.256 3.52 0.448 4.864 0.448 1.6-0.192 2.624-0.448 3.232-0.96 0.544-0.544 0.8-1.504 0.8-2.912 0-5.92-2.624-12.512-7.744-19.84 3.36-8.704 5.984-16.544 7.936-23.52z m36.384-11.872c0.864 2.208 1.664 4.672 2.56 7.488h19.904v19.52h-7.136v5.472h-33.664v-5.44h-7.392v-19.552h18.848a45.76 45.76 0 0 0-2.656-5.92z m13.568 16.096h-30.4v8.192h30.4v-8.192z m-27.776-139.264v58.976h-157.312c1.184 0 1.184 0 0-0.096v-58.784l157.312-0.096z m78.656-117.984v59.008h-235.968c1.28 0 1.28-0.064 0-0.128v-58.784l235.968-0.096z" fill="#d81e06" p-id="10879"></path></svg>
</span>
<span>医院</span>
</div>
</div>
<!-- 底部导航栏 -->
<section class="tab_bar mui-bar mui-bar-tab">
<!-- 周边 -->
<a id="nearby_POI" href="#" class="a" data-index="1" onclick="nearbyPOI()">
<div class="tab">
<i class="iconfont icon-home"></i>
</div>
</a>
<!-- 路线 -->
<a href="routemap.html" class="a">
<div class="tab middle">
<svg t="1610615358184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1392" width="64" height="64"><path d="M446.4 603.52l-318.848-77.568c-59.584-14.464-64.32-76-7.68-99.264L871.04 118.048c54.08-22.24 95.84 20.288 72.48 73.888l-237.6 545.6a38.016 38.016 0 1 1-69.728-30.4l217.696-499.84L216.32 469.28l270.24 65.728c13.632 3.328 24.32 13.856 27.84 27.456l80.256 310.912a38.016 38.016 0 1 1-73.6 19.008L446.4 603.52z" fill="#3D3D3D" p-id="1393"></path></svg>
</div>
</a>
<!-- 个人中心 -->
<a href="login.html" class="a" id="mine">
<div class="tab">
<i class="iconfont icon-my"></i>
</div>
</a>
</section>
<script>
let tab_middle = document.querySelector('.middle');
// console.log(tab_middle);
tab_middle.addEventListener('click', (e) => {
tab_middle.classList.toggle('open');
});
let nearby_POI=document.getElementById("nearby_POI");
nearby_POI.addEventListener("click",(e)=>{
nearby_POI.classList.toggle("open");
});
</script>
</body>
</html>
<script>
mui.init();
mui.plusReady(function () {
/**
* 监听UserInfo信息
*/
//获取全局user信息
var userInfo=app.getUserGlobalInfo();
//监听refresh
window.addEventListener("refresh",function(){
//初始化
init();
});
//初始化地图
init();
//单击地图事件
clickMap();
//滑动地图方法
moveMap();
});
/**
* 交通路况图层切换方法
*/
function convertTraffic(){
var index=$("#layer").attr("data-index");
if(index>0){
//添加交通路况至图层
map.addTileLayer(traffic); // 将图层添加到地图上
$("#layer").css("background-image","linear-gradient(to top, #209cff 0%, #68e0cf 100%)");
}else{
map.removeTileLayer(traffic); // 将图层移除
$("#layer").css("background-image","none");
}
$("#layer").attr("data-index",index*(-1));
}
/**
* 卫星图层切换方法
*/
function convertEarth(){
var index=$("#Earthlayer").attr("data-index");
if(index>0){
map.setMapType(BMAP_SATELLITE_MAP); //混合模式开启
$("#Earthlayer").css("background-image","linear-gradient(to top, #209cff 0%, #68e0cf 100%)");
}else{
map.setMapType(BMAP_NORMAL_MAP); // 混合模式关闭
$("#Earthlayer").css("background-image","none");
}
$("#Earthlayer").attr("data-index",index*(-1));
}
/**
* 单击周边事件
*/
function nearbyPOI(){
if($("#nearPOI").css("display")=='none'){
//展示弹窗
$("#nearPOI").slideDown();
}else{
//隐藏弹窗
$("#nearPOI").slideUp();
}
}
</script>