├── app.js ├── pages ├── detail │ ├── detail.json │ ├── detail.wxml │ ├── detail.wxss │ └── detail.js ├── index │ ├── index.json │ ├── .DS_Store │ ├── index.wxss │ ├── index.wxml │ └── index.js └── .DS_Store ├── .DS_Store ├── images ├── .DS_Store ├── clear.png ├── pos.png ├── type-1.png ├── type-2.png ├── type-3.png ├── type-4.png ├── icon-map.png ├── type-1-g.png ├── type-2-g.png ├── type-3-g.png ├── type-4-g.png ├── mapicon_navi_e.png ├── mapicon_navi_s.png ├── QQ20190501-165133@2x.png ├── QQ20190501-165206@2x.png ├── QQ20190501-165233@2x.png ├── QQ20190501-165833@2x.png ├── QQ20190501-165849@2x.png └── QQ20190501-170225@2x.png ├── libs ├── .DS_Store ├── conf.js └── amap-wx.js ├── app.json ├── project.config.json ├── README.md └── app.wxss /app.js: -------------------------------------------------------------------------------- 1 | App({}) 2 | -------------------------------------------------------------------------------- /pages/detail/detail.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/.DS_Store -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /images/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/clear.png -------------------------------------------------------------------------------- /images/pos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/pos.png -------------------------------------------------------------------------------- /libs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/libs/.DS_Store -------------------------------------------------------------------------------- /pages/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/pages/.DS_Store -------------------------------------------------------------------------------- /images/type-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-1.png -------------------------------------------------------------------------------- /images/type-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-2.png -------------------------------------------------------------------------------- /images/type-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-3.png -------------------------------------------------------------------------------- /images/type-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-4.png -------------------------------------------------------------------------------- /images/icon-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/icon-map.png -------------------------------------------------------------------------------- /images/type-1-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-1-g.png -------------------------------------------------------------------------------- /images/type-2-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-2-g.png -------------------------------------------------------------------------------- /images/type-3-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-3-g.png -------------------------------------------------------------------------------- /images/type-4-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/type-4-g.png -------------------------------------------------------------------------------- /pages/index/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/pages/index/.DS_Store -------------------------------------------------------------------------------- /images/mapicon_navi_e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/mapicon_navi_e.png -------------------------------------------------------------------------------- /images/mapicon_navi_s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/mapicon_navi_s.png -------------------------------------------------------------------------------- /images/QQ20190501-165133@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/QQ20190501-165133@2x.png -------------------------------------------------------------------------------- /images/QQ20190501-165206@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/QQ20190501-165206@2x.png -------------------------------------------------------------------------------- /images/QQ20190501-165233@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/QQ20190501-165233@2x.png -------------------------------------------------------------------------------- /images/QQ20190501-165833@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/QQ20190501-165833@2x.png -------------------------------------------------------------------------------- /images/QQ20190501-165849@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/QQ20190501-165849@2x.png -------------------------------------------------------------------------------- /images/QQ20190501-170225@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humanlegacy/wechat-miniapp-map/HEAD/images/QQ20190501-170225@2x.png -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/detail/detail" 5 | ], 6 | "permission": { 7 | "scope.userLocation": { 8 | "desc": "你的位置信息将用于小程序位置接口的效果展示" 9 | } 10 | }, 11 | "window": { 12 | "navigationBarTitleText": "52魔都", 13 | "navigationBarBackgroundColor": "#000", 14 | "navigationBarTextStyle": "white", 15 | "backgroundTextStyle": "dark", 16 | "backgroundColor": "#000" 17 | } 18 | } -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": false, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": false, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "2.6.6", 12 | "appid": "wx8d1d22f877ef9e82", 13 | "projectname": "wechat-miniapp-map", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "miniprogram": { 24 | "current": -1, 25 | "list": [] 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 微信小程序实例：调用高德地图api，路线规划/规划详情演示，城市列表首字母排序 2 | 3 | ### 请在文件中填写高德地图相关key 4 | 5 | > 更多实例请搜索微信小程序：PocketMap 6 | ### 1.保留搜索历史记录，滑动删除，一键清理搜索记录 7 | ![weChart-map](https://raw.githubusercontent.com/humanlegacy/weChat-map/master/images/QQ20190501-165133@2x.png) 8 | ### 2.全国城市列表，当前城市定位，右侧支持滑动索引，热门城市推荐 9 | ![weChart-map](https://raw.githubusercontent.com/humanlegacy/weChat-map/master/images/QQ20190501-165206@2x.png) 10 | ### 3.地址联想搜索 11 | ![weChart-map](https://raw.githubusercontent.com/humanlegacy/weChat-map/master/images/QQ20190501-165233@2x.png) 12 | ### 4.驾车，公交，骑行，步行路线规划 13 | ![weChart-map](https://raw.githubusercontent.com/humanlegacy/weChat-map/master/images/QQ20190501-170225@2x.png) 14 | ### 5.路线详情，出行方式规划 15 | ![weChart-map](https://raw.githubusercontent.com/humanlegacy/weChat-map/master/images/QQ20190501-165849@2x.png) 16 | ### 6.公交路线列表，公交路线规划 17 | ![weChart-map](https://raw.githubusercontent.com/humanlegacy/weChat-map/master/images/QQ20190501-165833@2x.png) 18 | > 更多实例请搜索微信小程序：PocketMap 19 | 20 | -------------------------------------------------------------------------------- /pages/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.name}} 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | {{opts.name}} 17 | {{opts.address}} 18 | 25 | 26 | 27 | 31 | 34 | 35 | 36 | 37 | 48 | 49 | 50 | 62 | 63 | -------------------------------------------------------------------------------- /pages/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | /*出行方案*/ 2 | 3 | .navType { 4 | width: 100%; 5 | box-sizing: border-box; 6 | display: flex; 7 | background: #000; 8 | } 9 | 10 | .navType-item { 11 | flex: 1; 12 | opacity: 0.5; 13 | text-align: center; 14 | transition: opacity 0.3s ease 0s; 15 | } 16 | 17 | .navType-icon, .navType-icon-g { 18 | width: 50rpx; 19 | height: 50rpx; 20 | display: block; 21 | margin: 0 auto; 22 | } 23 | 24 | .navType-icon-g { 25 | display: none; 26 | } 27 | 28 | .navType-name { 29 | font-size: 22rpx; 30 | color: #fff; 31 | padding-top: 10rpx; 32 | } 33 | 34 | .navType-item .wrap { 35 | border-bottom: 10rpx solid rgba(0, 0, 0, 0); 36 | padding: 15rpx 10rpx 10rpx 10rpx; 37 | } 38 | 39 | .navType-item .wrap .navType-title { 40 | font-size: 25rpx; 41 | color: #000; 42 | padding: 25rpx 0; 43 | padding-left: 5rpx; 44 | display: inline-block; 45 | vertical-align: middle; 46 | } 47 | 48 | /*选中的出行方式*/ 49 | 50 | .navType-sel { 51 | opacity: 1; 52 | } 53 | 54 | .navType-sel .wrap { 55 | display: inline-block; 56 | border-bottom: 10rpx solid #268f26; 57 | } 58 | 59 | .navType-sel .wrap .navType-icon-g { 60 | display: block; 61 | } 62 | 63 | .navType-sel .wrap .navType-icon { 64 | display: none; 65 | } 66 | 67 | .navType-sel .wrap .navType-name { 68 | color: #268f26; 69 | } 70 | 71 | /* 标题 */ 72 | 73 | .common-title { 74 | padding: 50rpx 30rpx 30rpx 30rpx; 75 | } 76 | .common-title .detail { 77 | font-size: 30rpx; 78 | color: #555; 79 | padding-top: 20rpx; 80 | line-height: 1.7; 81 | } 82 | 83 | /* 更换出行方案 */ 84 | 85 | .navTap { 86 | width: 100%; 87 | text-align: center; 88 | padding: 30rpx 0; 89 | } 90 | .navTap-btn{ 91 | background: #268f26; 92 | font-size: 28rpx; 93 | padding: 13rpx 35rpx; 94 | display: inline-block; 95 | color: #fff; 96 | border-radius: 30rpx; 97 | margin-bottom: 15rpx; 98 | } 99 | .navTap .selectType{ 100 | color: #aaa; 101 | font-size: 23rpx; 102 | font-weight: normal; 103 | } 104 | 105 | /* 路线详情 */ 106 | 107 | .navType-detail { 108 | padding: 30rpx; 109 | } 110 | 111 | /* 公交路线 */ 112 | 113 | .transfer-list { 114 | padding-bottom: 30rpx; 115 | } 116 | 117 | .transfer-item { 118 | box-sizing: border-box; 119 | padding: 30rpx; 120 | font-size: 35rpx; 121 | color: #222; 122 | background: #fff; 123 | border-bottom: 1rpx solid #eee; 124 | } 125 | 126 | .transfer-transport { 127 | padding-bottom: 15rpx; 128 | } 129 | 130 | .transfer-transport-name { 131 | display: inline-block; 132 | word-break: break-all; 133 | white-space: normal; 134 | } 135 | 136 | .route-info { 137 | font-size: 25rpx; 138 | color: #aaa; 139 | } 140 | 141 | .tip { 142 | font-size: 25rpx; 143 | color: #aaa; 144 | text-align: center; 145 | padding-top: 100rpx; 146 | } 147 | /*跳转地图按钮*/ 148 | @keyframes Tada { 149 | from { 150 | transform: scale(1); 151 | } 152 | 153 | to { 154 | transform: scale(1.2); 155 | } 156 | } 157 | .fast-go{ 158 | width: 100rpx; 159 | height: 100rpx; 160 | border-radius: 50rpx; 161 | margin: 0 auto 50rpx auto; 162 | box-sizing: border-box; 163 | padding: 15rpx; 164 | background: #268f26; 165 | box-shadow: 0 5rpx 10rpx rgba(46, 145, 46,0.3); 166 | animation: Tada 2s ease-in infinite alternate; 167 | } 168 | .fast-go-icon{ 169 | display: block; 170 | width: 100%; 171 | height: 100%; 172 | } 173 | 174 | .common-title { 175 | margin-bottom: 30rpx; 176 | } 177 | 178 | .common-title .title { 179 | font-size: 35rpx; 180 | font-weight: bold; 181 | color: #333; 182 | } 183 | 184 | .common-title .desc { 185 | font-size: 25rpx; 186 | color: #888; 187 | } -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | height: 100%; 3 | } 4 | 5 | .container { 6 | padding-top: 100rpx; 7 | box-sizing: border-box; 8 | height: 100%; 9 | } 10 | 11 | .search-bar { 12 | width: 100%; 13 | height: 100rpx; 14 | line-height: 100rpx; 15 | margin-top: -100rpx; 16 | box-sizing: border-box; 17 | overflow: hidden; 18 | background: rgb(59, 63, 68); 19 | padding: 0 20rpx; 20 | position: relative; 21 | } 22 | 23 | .search-bar .clear { 24 | position: absolute; 25 | right: 30rpx; 26 | bottom: 25rpx; 27 | z-index: 2; 28 | height: 50rpx; 29 | width: 50rpx; 30 | opacity: 0.35; 31 | } 32 | 33 | .search-bar .split { 34 | padding: 0 30rpx; 35 | color: #555; 36 | } 37 | 38 | .search-bar .picker-opts { 39 | box-sizing: border-box; 40 | white-space: nowrap; 41 | font-size: 25rpx; 42 | color: #fff; 43 | float: left; 44 | height: 100rpx; 45 | line-height: 100rpx; 46 | } 47 | 48 | .search-bar input { 49 | font-size: 35rpx; 50 | color: #f5f5f5; 51 | height: 100rpx; 52 | line-height: 100rpx; 53 | box-sizing: border-box; 54 | } 55 | 56 | .search-bar .placeholder { 57 | font-size: 30rpx; 58 | color: #aaa; 59 | } 60 | 61 | .list-detail, .list-city { 62 | width: 100%; 63 | height: 100%; 64 | overflow-y: auto; 65 | background: #fff; 66 | } 67 | 68 | .list-detail .item-nav { 69 | border-bottom: 1rpx solid #eee; 70 | } 71 | 72 | .list-detail .title, .history .title { 73 | font-size: 32rpx; 74 | color: #000; 75 | line-height: 45rpx; 76 | } 77 | 78 | .list-detail .address, .history .address { 79 | font-size: 28rpx; 80 | color: #aaa; 81 | white-space: normal; 82 | } 83 | 84 | /* 城市列表 */ 85 | 86 | .list-city { 87 | position: relative; 88 | } 89 | 90 | .py { 91 | box-sizing: border-box; 92 | background: #eee; 93 | font-size: 23rpx; 94 | color: #aaa; 95 | padding: 10rpx 25rpx; 96 | } 97 | 98 | .fullname { 99 | box-sizing: border-box; 100 | font-size: 30rpx; 101 | color: #555; 102 | padding: 25rpx; 103 | border-bottom: 1rpx solid #eee; 104 | } 105 | 106 | .city-py { 107 | position: fixed; 108 | top: 50%; 109 | right: 0; 110 | margin-top: -360rpx; 111 | } 112 | 113 | .city-py view { 114 | font-size: 25rpx; 115 | width: 60rpx; 116 | height: 12px; 117 | line-height: 12px; 118 | text-align: center; 119 | color: #555; 120 | } 121 | 122 | .showPy { 123 | width: 150rpx; 124 | height: 150rpx; 125 | background: #fff; 126 | border-radius: 15rpx; 127 | line-height: 150rpx; 128 | text-align: center; 129 | font-size: 80rpx; 130 | margin: auto; 131 | position: absolute; 132 | top: 0; 133 | left: 0; 134 | bottom: 0; 135 | right: 0; 136 | z-index: 3; 137 | color: #333; 138 | box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35); 139 | } 140 | 141 | .hot-city { 142 | border: 1rpx solid #eee; 143 | display: inline-block; 144 | margin: 25rpx 0 0 25rpx; 145 | padding: 10rpx 25rpx; 146 | font-size: 25rpx; 147 | } 148 | 149 | /* 历史记录 */ 150 | 151 | .list-history { 152 | box-sizing: border-box; 153 | padding-top: 70rpx; 154 | height: 100%; 155 | } 156 | 157 | .search-history { 158 | background: #f5f5f5; 159 | font-size: 25rpx; 160 | padding: 0 20rpx; 161 | color: #aaa; 162 | height: 70rpx; 163 | line-height: 70rpx; 164 | margin-top: -70rpx; 165 | } 166 | 167 | .clear-history { 168 | display: inline-block; 169 | float: right; 170 | border: 1rpx solid #eee; 171 | line-height: 40rpx; 172 | padding: 0 20rpx; 173 | margin-top: 15rpx; 174 | background: #fff; 175 | border-radius: 5rpx; 176 | } 177 | 178 | .history-item-wrap:active, .item-nav:active { 179 | background: #eee; 180 | } 181 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | @keyframes Tada { 2 | from { 3 | transform: scale(1); 4 | } 5 | 6 | to { 7 | transform: scale(1.2); 8 | } 9 | } 10 | 11 | page, .container { 12 | width: 100%; 13 | box-sizing: border-box; 14 | } 15 | 16 | .container { 17 | width: 100%; 18 | height: 100%; 19 | } 20 | /*跳转地图按钮*/ 21 | .fast-go{ 22 | width: 100rpx; 23 | height: 100rpx; 24 | border-radius: 50rpx; 25 | margin: 0 auto 50rpx auto; 26 | box-sizing: border-box; 27 | padding: 15rpx; 28 | background: #268f26; 29 | box-shadow: 0 5rpx 10rpx rgba(46, 145, 46,0.3); 30 | animation: Tada 2s ease-in infinite alternate; 31 | } 32 | .fast-go-icon{ 33 | display: block; 34 | width: 100%; 35 | height: 100%; 36 | } 37 | /*ui框架*/ 38 | 39 | .common-title { 40 | margin-bottom: 30rpx; 41 | } 42 | 43 | .common-title .title { 44 | font-size: 35rpx; 45 | font-weight: bold; 46 | color: #333; 47 | } 48 | 49 | .common-title .desc { 50 | font-size: 25rpx; 51 | color: #888; 52 | } 53 | 54 | .nodata{ 55 | padding: 100rpx 0; 56 | text-align: center; 57 | font-size: 30rpx; 58 | color: #aaa; 59 | } 60 | 61 | .navType-detail-item { 62 | font-size: 35rpx; 63 | color: #222; 64 | position: relative; 65 | padding: 20rpx 20rpx 20rpx 30rpx; 66 | } 67 | 68 | .navType-detail-item.start-pos, .navType-detail-item.end-pos { 69 | font-size: 35rpx; 70 | color: #353535; 71 | } 72 | 73 | .navType-detail-item text { 74 | font-size: 25rpx; 75 | color: #aaa; 76 | display: block; 77 | } 78 | 79 | .navType-detail-wrap { 80 | border-left: 1rpx dashed #ccc; 81 | margin-left: 30rpx; 82 | } 83 | 84 | .navType-detail-item::before { 85 | content: ""; 86 | display: block; 87 | width: 20rpx; 88 | height: 20rpx; 89 | border-radius: 50%; 90 | box-sizing: border-box; 91 | background: #f5f5f5; 92 | border: 1rpx solid #ccc; 93 | margin-top: -10rpx; 94 | position: absolute; 95 | top: 50%; 96 | left: -10rpx; 97 | } 98 | 99 | .navType-detail-item.start-pos::before { 100 | background: #18a15f; 101 | border: 1rpx solid #18a15f; 102 | } 103 | 104 | .navType-detail-item.end-pos::before { 105 | background: #dd4e42; 106 | border: 1rpx solid #dd4e42; 107 | } 108 | 109 | /* 历史记录 */ 110 | 111 | .history { 112 | height: 100%; 113 | width: 100%; 114 | background: #fff; 115 | } 116 | 117 | .history-item { 118 | border-bottom: 1rpx solid #e5e5e5; 119 | overflow: hidden; 120 | position: relative; 121 | box-sizing: border-box; 122 | } 123 | 124 | .history-item-wrap { 125 | display: block; 126 | width: 100%; 127 | height: 100%; 128 | box-sizing: border-box; 129 | font-size: 30rpx; 130 | background: #fff; 131 | position: relative; 132 | z-index: 2; 133 | transition: transform 0.30s linear 0s; 134 | } 135 | 136 | .item-nav { 137 | padding: 35rpx 30rpx 35rpx 60rpx; 138 | position: relative; 139 | } 140 | 141 | .item-nav .icon { 142 | width: 35rpx; 143 | height: 35rpx; 144 | position: absolute; 145 | left: 20rpx; 146 | top: 40rpx; 147 | } 148 | 149 | .history-item-del { 150 | position: absolute; 151 | z-index: 1; 152 | right: 0; 153 | top: 0; 154 | height: 100%; 155 | width: 180rpx; 156 | text-align: center; 157 | background: #fb2531; 158 | color: #fff; 159 | box-sizing: border-box; 160 | padding-top: 50rpx; 161 | font-size: 35rpx; 162 | } 163 | 164 | .history-item-del text { 165 | position: absolute; 166 | height: 30rpx; 167 | display: block; 168 | top: 50%; 169 | margin-top: -20rpx; 170 | width: 100%; 171 | } 172 | 173 | .from { 174 | font-size: 30rpx; 175 | font-weight: bold; 176 | color: #555; 177 | } 178 | 179 | .to { 180 | font-size: 25rpx; 181 | color: #aaa; 182 | } 183 | 184 | .delHistory { 185 | color: rgba(255, 255, 255, 0.5); 186 | display: inline-block; 187 | float: right; 188 | margin-top: 35rpx; 189 | font-size: 25rpx; 190 | padding: 15rpx 30rpx; 191 | } 192 | 193 | .no-data { 194 | text-align: center; 195 | font-size: 25rpx; 196 | color: #aaa; 197 | width: 80%; 198 | padding: 100rpx 0; 199 | margin: 0 auto; 200 | } 201 | 202 | .end { 203 | font-size: 24rpx; 204 | color: #aaa; 205 | text-align: center; 206 | padding: 100rpx 0; 207 | font-style: italic; 208 | } 209 | 210 | -------------------------------------------------------------------------------- /libs/conf.js: -------------------------------------------------------------------------------- 1 | //高德小程序SDK 2 | var amapFile = require('amap-wx.js'); 3 | /*************** 4 | * 此处为高德地图小程序的key 5 | ****************/ 6 | var map = new amapFile.AMapWX({ 7 | key: '高德地图小程序的key' 8 | }); 9 | var watcher = true; 10 | 11 | //公共模块 12 | module.exports = { 13 | //实例化高德地图 14 | map: map, 15 | /*************** 16 | * 此处为高地地图web服务的key 17 | ****************/ 18 | webKey: null, 19 | //出行方案 20 | navType: [{ 21 | icon: "../../images/type-1.png", 22 | sel: "../../images/type-1-g.png", 23 | name: "驾车", 24 | url: "https://restapi.amap.com/v3/direction/driving" 25 | }, 26 | { 27 | icon: "../../images/type-2.png", 28 | sel: "../../images/type-2-g.png", 29 | name: "公交", 30 | url: "https://restapi.amap.com/v3/direction/transit/integrated" 31 | }, 32 | { 33 | icon: "../../images/type-3.png", 34 | sel: "../../images/type-3-g.png", 35 | name: "骑行", 36 | url: "https://restapi.amap.com/v4/direction/bicycling" 37 | }, 38 | { 39 | icon: "../../images/type-4.png", 40 | sel: "../../images/type-4-g.png", 41 | name: "步行", 42 | url: "https://restapi.amap.com/v3/direction/walking" 43 | } 44 | ], 45 | //保存历史记录 46 | saveHistory(data, query) { 47 | if (data.length == 0) { 48 | return [query]; 49 | } else { 50 | var startName = [], 51 | endName = [], 52 | history = data; 53 | history.forEach(function(item) { 54 | startName.push(item.sname) 55 | endName.push(item.name) 56 | }); 57 | if (startName.indexOf(query.sname) < 0 || endName.indexOf(query.name) < 0) { 58 | history.unshift(query) 59 | } 60 | if (history.length > 15) { 61 | history.length = 15; 62 | } 63 | startName = null; 64 | endName = null; 65 | return history; 66 | } 67 | }, 68 | //格式化距离 69 | distance: function(dis) { 70 | return dis < 1000 ? dis + "米" : (dis / 1000).toFixed(2).toString() + "公里"; 71 | }, 72 | //格式化时间 73 | resultFormat: function(result) { 74 | var h = Math.floor(result / 3600 % 24); 75 | var m = Math.floor(result / 60 % 60); 76 | if (h < 1) { 77 | return result = m + "分钟"; 78 | } else { 79 | return result = h + "小时" + m + "分钟"; 80 | } 81 | }, 82 | //驾车，骑行，步行线路 83 | polyline: function(data) { 84 | var points = []; 85 | if (data.paths && data.paths[0] && data.paths[0].steps) { 86 | var steps = data.paths[0].steps; 87 | for (var i = 0; i < steps.length; i++) { 88 | var poLen = steps[i].polyline.split(';'); 89 | for (var j = 0; j < poLen.length; j++) { 90 | points.push({ 91 | longitude: parseFloat(poLen[j].split(',')[0]), 92 | latitude: parseFloat(poLen[j].split(',')[1]) 93 | }) 94 | } 95 | } 96 | } 97 | return points; 98 | }, 99 | 100 | //弹窗 101 | dialog: function(content, callback) { 102 | wx.showModal({ 103 | title: '提示', 104 | content: content, 105 | showCancel: false, 106 | success: function(res) { 107 | if (res.confirm) { 108 | if (callback) { 109 | callback(); 110 | } 111 | } 112 | } 113 | }) 114 | }, 115 | //授权地理位置 116 | getLocation: function(callback) { 117 | wx.getLocation({ 118 | type: 'gcj02', 119 | success: function() { 120 | if (callback) { 121 | callback(); 122 | } 123 | }, 124 | fail: function() { 125 | wx.getSetting({ 126 | success: function(res) { 127 | if (!res.authSetting['scope.userInfo'] || !res.authSetting['scope.userLocation']) { 128 | wx.openSetting(); 129 | } 130 | } 131 | }); 132 | } 133 | }) 134 | } 135 | } -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{citySelected}} ▾ 5 | \ 6 | 7 | 8 | 9 | 10 | 11 | 12 | 36 | 37 | 38 | 48 | 49 | 50 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | var $ = require('../../libs/conf.js'); 2 | var city = require('../../libs/city.js'); 3 | 4 | Page({ 5 | data: { 6 | //城市下拉 7 | citySelected: '上海市', 8 | city: '上海市', 9 | cityData: {}, 10 | hotCityData: [], 11 | _py: ["hot", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"], 12 | //搜索列表 13 | inputVal: '', 14 | searchList: [], 15 | cityListShow: false, 16 | inputListShow: false, 17 | hidden: true, 18 | showPy: '★', 19 | //搜索历史记录 20 | historyListShow: true, 21 | historyList: [] 22 | }, 23 | onLoad: function() { 24 | var that = this; 25 | // myCity = wx.getStorageSync("myCity"); 26 | 27 | this.setData({ 28 | historyList: wx.getStorageSync("historyList").length > 0 ? wx.getStorageSync("historyList") : [] 29 | }); 30 | 31 | this.setData({ 32 | // citySelected: myCity, 33 | // city: myCity, 34 | latitude: wx.getStorageSync("latitude"), 35 | longitude: wx.getStorageSync("longitude"), 36 | sname: "我的位置", 37 | saddress: '上海市浦东新区' 38 | }); 39 | 40 | this.setData({ 41 | cityData: city.all, 42 | hotCityData: city.hot 43 | }); 44 | }, 45 | select(event) { 46 | var query = event.currentTarget.dataset; 47 | query.POIlongitude = query.poilocation.split(',')[0]; 48 | query.POIlatitude = query.poilocation.split(',')[1]; 49 | wx.navigateTo({ 50 | url: '../detail/detail?query=' + JSON.stringify(query) 51 | }); 52 | //历史记录 53 | var history = $.saveHistory(wx.getStorageSync("historyList"), query); 54 | this.setData({ 55 | historyList: history 56 | }); 57 | wx.setStorageSync("historyList", history); 58 | }, 59 | 60 | //搜索关键字 61 | keyword: function(keyword) { 62 | var that = this; 63 | $.map.getInputtips({ 64 | keywords: keyword, 65 | location: that.data.longitude + "," + that.data.latitude, 66 | success: function(data) { 67 | if (data && data.tips) { 68 | var searchList = data.tips.filter((item) => { 69 | return typeof item.location != 'undefined'; 70 | }) 71 | that.setData({ 72 | searchList: searchList 73 | }); 74 | } 75 | } 76 | }); 77 | }, 78 | 79 | //打开城市列表 80 | openCityList: function() { 81 | this.setData({ 82 | cityListShow: true, 83 | inputListShow: false, 84 | historyListShow: false 85 | }); 86 | }, 87 | 88 | //选择城市 89 | selectCity: function(e) { 90 | var dataset = e.currentTarget.dataset; 91 | this.setData({ 92 | citySelected: dataset.fullname, 93 | cityListShow: false, 94 | inputListShow: false, 95 | historyListShow: true, 96 | location: { 97 | latitude: dataset.lat, 98 | longitude: dataset.lng 99 | } 100 | }); 101 | }, 102 | touchstart: function(e) { 103 | this.setData({ 104 | index: e.currentTarget.dataset.index, 105 | Mstart: e.changedTouches[0].pageX 106 | }); 107 | }, 108 | touchmove: function(e) { 109 | var history = this.data.historyList; 110 | var move = this.data.Mstart - e.changedTouches[0].pageX; 111 | history[this.data.index].x = move > 0 ? -move : 0; 112 | this.setData({ 113 | historyList: history 114 | }); 115 | }, 116 | touchend: function(e) { 117 | var history = this.data.historyList; 118 | var move = this.data.Mstart - e.changedTouches[0].pageX; 119 | history[this.data.index].x = move > 100 ? -180 : 0; 120 | this.setData({ 121 | historyList: history 122 | }); 123 | }, 124 | //获取文字信息 125 | getPy: function(e) { 126 | this.setData({ 127 | hidden: false, 128 | showPy: e.target.id, 129 | }) 130 | }, 131 | 132 | setPy: function(e) { 133 | this.setData({ 134 | hidden: true, 135 | scrollTopId: this.data.showPy 136 | }) 137 | }, 138 | 139 | //滑动选择城市 140 | tMove: function(e) { 141 | var y = e.touches[0].clientY, 142 | offsettop = e.currentTarget.offsetTop; 143 | 144 | //判断选择区域,只有在选择区才会生效 145 | if (y > offsettop) { 146 | var num = parseInt((y - offsettop) / 12); 147 | this.setData({ 148 | showPy: this.data._py[num] 149 | }) 150 | }; 151 | }, 152 | 153 | //触发全部开始选择 154 | tStart: function() { 155 | this.setData({ 156 | hidden: false 157 | }) 158 | }, 159 | 160 | //触发结束选择 161 | tEnd: function() { 162 | this.setData({ 163 | hidden: true, 164 | scrollTopId: this.data.showPy 165 | }) 166 | }, 167 | //清空历史记录 168 | clearHistory: function() { 169 | var that = this; 170 | wx.showActionSheet({ 171 | itemList: ['清空'], 172 | itemColor: '#DD4F43', 173 | success: function(res) { 174 | if (res.tapIndex == 0) { 175 | that.setData({ 176 | historyList: [] 177 | }); 178 | wx.setStorageSync("historyList", []); 179 | } 180 | } 181 | }) 182 | }, 183 | //删除某一条 184 | del: function(e) { 185 | var that = this; 186 | wx.showActionSheet({ 187 | itemList: ['删除'], 188 | itemColor: '#DD4F43', 189 | success: function(res) { 190 | if (res.tapIndex == 0) { 191 | var index = e.currentTarget.dataset.index, 192 | history = that.data.historyList; 193 | history.splice(index, 1); 194 | that.setData({ 195 | historyList: history 196 | }); 197 | wx.setStorageSync("historyList", history); 198 | } 199 | } 200 | }); 201 | }, 202 | //输入 203 | input: function(e) { 204 | if (e.detail.value == '') { 205 | this.setData({ 206 | inputVal: e.detail.value, 207 | inputListShow: false, 208 | cityListShow: false, 209 | historyListShow: true 210 | }); 211 | } else { 212 | this.setData({ 213 | inputVal: e.detail.value, 214 | inputListShow: true, 215 | cityListShow: false, 216 | historyListShow: false 217 | }); 218 | this.keyword(this.data.citySelected + e.detail.value) 219 | } 220 | }, 221 | 222 | //清除输入框 223 | clear: function() { 224 | this.setData({ 225 | inputVal: '', 226 | inputListShow: false, 227 | historyListShow: true 228 | }) 229 | } 230 | }) -------------------------------------------------------------------------------- /libs/amap-wx.js: -------------------------------------------------------------------------------- 1 | function AMapWX(a){this.key=a.key,this.requestConfig={key:a.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"}}AMapWX.prototype.getWxLocation=function(a,b){wx.getLocation({type:"gcj02",success:function(a){var c=a.longitude+","+a.latitude;wx.setStorage({key:"userLocation",data:c}),b(c)},fail:function(c){wx.getStorage({key:"userLocation",success:function(a){a.data&&b(a.data)}}),a.fail({errCode:"0",errMsg:c.errMsg||""})}})},AMapWX.prototype.getRegeo=function(a){function c(c){var d=b.requestConfig;wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:b.key,location:c,extensions:"all",s:d.s,platform:d.platform,appname:b.key,sdkversion:d.sdkversion,logversion:d.logversion},method:"GET",header:{"content-type":"application/json"},success:function(b){var d,e,f,g,h,i,j,k,l;b.data.status&&"1"==b.data.status?(d=b.data.regeocode,e=d.addressComponent,f=[],g="",d&&d.roads[0]&&d.roads[0].name&&(g=d.roads[0].name+"附近"),h=c.split(",")[0],i=c.split(",")[1],d.pois&&d.pois[0]&&(g=d.pois[0].name+"附近",j=d.pois[0].location,j&&(h=parseFloat(j.split(",")[0]),i=parseFloat(j.split(",")[1]))),e.provice&&f.push(e.provice),e.city&&f.push(e.city),e.district&&f.push(e.district),e.streetNumber&&e.streetNumber.street&&e.streetNumber.number?(f.push(e.streetNumber.street),f.push(e.streetNumber.number)):(k="",d&&d.roads[0]&&d.roads[0].name&&(k=d.roads[0].name),f.push(k)),f=f.join(""),l=[{iconPath:a.iconPath,width:a.iconWidth,height:a.iconHeight,name:f,desc:g,longitude:h,latitude:i,id:0,regeocodeData:d}],a.success(l)):a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}var b=this;a.location?c(a.location):b.getWxLocation(a,function(a){c(a)})},AMapWX.prototype.getWeather=function(a){function d(d){var e="base";a.type&&"forecast"==a.type&&(e="all"),wx.request({url:"https://restapi.amap.com/v3/weather/weatherInfo",data:{key:b.key,city:d,extensions:e,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion},method:"GET",header:{"content-type":"application/json"},success:function(b){function c(a){var b={city:{text:"城市",data:a.city},weather:{text:"天气",data:a.weather},temperature:{text:"温度",data:a.temperature},winddirection:{text:"风向",data:a.winddirection+"风"},windpower:{text:"风力",data:a.windpower+"级"},humidity:{text:"湿度",data:a.humidity+"%"}};return b}var d,e;b.data.status&&"1"==b.data.status?b.data.lives?(d=b.data.lives,d&&d.length>0&&(d=d[0],e=c(d),e["liveData"]=d,a.success(e))):b.data.forecasts&&b.data.forecasts[0]&&a.success({forecast:b.data.forecasts[0]}):a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}function e(e){wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:b.key,location:e,extensions:"all",s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion},method:"GET",header:{"content-type":"application/json"},success:function(b){var c,e;b.data.status&&"1"==b.data.status?(e=b.data.regeocode,e.addressComponent?c=e.addressComponent.adcode:e.aois&&e.aois.length>0&&(c=e.aois[0].adcode),d(c)):a.fail({errCode:b.data.infocode,errMsg:b.data.info})},fail:function(b){a.fail({errCode:"0",errMsg:b.errMsg||""})}})}var b=this,c=b.requestConfig;a.city?d(a.city):b.getWxLocation(a,function(a){e(a)})},AMapWX.prototype.getPoiAround=function(a){function d(d){var e={key:b.key,location:d,s:c.s,platform:c.platform,appname:b.key,sdkversion:c.sdkversion,logversion:c.logversion};a.querytypes&&(e["types"]=a.querytypes),a.querykeywords&&(e["keywords"]=a.querykeywords),wx.request({url:"https://restapi.amap.com/v3/place/around",data:e,method:"GET",header:{"content-type":"application/json"},success:function(b){var c,d,e,f;if(b.data.status&&"1"==b.data.status){if(b=b.data,b&&b.pois){for(c=[],d=0;d= 5000) { 110 | that.setData({ 111 | showDetail: false, 112 | showBusPaths: false, 113 | showMap: false 114 | }); 115 | wx.hideNavigationBarLoading(); 116 | $.dialog("起点终点距离过长，步行规划限制5公里以内"); 117 | return; 118 | } 119 | } 120 | //骑行规划限制15公里 121 | if (data[idx].name == '骑行') { 122 | if (distance >= 15000) { 123 | that.setData({ 124 | showDetail: false, 125 | showBusPaths: false, 126 | showMap: false 127 | }); 128 | wx.hideNavigationBarLoading(); 129 | $.dialog("起点终点距离过长,骑行限制15公里以内"); 130 | return; 131 | } 132 | } 133 | // 驾车规划限时500公里 134 | if (data[idx].name == '驾车') { 135 | if (distance >= 500000) { 136 | wx.hideNavigationBarLoading(); 137 | $.dialog("起点终点距离过长，驾车规划限制500公里以内"); 138 | return; 139 | } 140 | } 141 | wx.request({ 142 | url: data[idx].url, 143 | data: { 144 | key: userKey, 145 | origin: origin, 146 | destination: destination 147 | }, 148 | success: function (res) { 149 | var data = res.data.route ? res.data.route : res.data.data; 150 | var path = data.paths[0], 151 | info = { 152 | info: data 153 | }, 154 | polyline = { 155 | polyline: [{ 156 | points: $.polyline(data), 157 | color: "#0091ff", 158 | width: 6 159 | }] 160 | }, 161 | other = { 162 | distance: $.distance(path.distance), 163 | duration: path.duration ? $.resultFormat(path.duration) : false, 164 | cost: data.taxi_cost ? parseInt(data.taxi_cost) : false, 165 | lights: path.traffic_lights ? path.traffic_lights : false, 166 | showMap: true, 167 | showNav: true, 168 | showDetail: true, 169 | showBusPaths: false 170 | }; 171 | that.setData(info); 172 | that.setData(polyline); 173 | that.setData(other); 174 | 175 | temp[idx] = { 176 | info: info, 177 | polyline: polyline, 178 | other: other 179 | }; 180 | that.setData({ 181 | cache: temp 182 | }); 183 | wx.hideNavigationBarLoading(); 184 | } 185 | }); 186 | } 187 | }) 188 | }, 189 | //公交线路 190 | getTransitRoute: function (strategy, fromOpts) { 191 | wx.showNavigationBarLoading(); 192 | var that = this, 193 | temp = this.data.cache; 194 | if (typeof temp[1] == 'object' && !fromOpts) { 195 | that.setData(temp[1].transits); 196 | that.setData(temp[1].other); 197 | wx.hideNavigationBarLoading(); 198 | return; 199 | } 200 | wx.request({ 201 | url: 'https://restapi.amap.com/v3/direction/transit/integrated', 202 | data: { 203 | key: userKey, 204 | origin: '121.54409,31.22114', 205 | destination: that.data.opts.POIlongitude + ',' + that.data.opts.POIlatitude, 206 | city: that.data.city, 207 | cityd: that.data.cityd, 208 | strategy: strategy, 209 | nightflag: 0 210 | }, 211 | success: function (res) { 212 | if (res.data.errcode) { 213 | wx.hideNavigationBarLoading(); 214 | $.dialog(res.data.errdetail); 215 | return; 216 | } 217 | var route = res.data.route, transits = route.transits; 218 | for (var i = 0; i < transits.length; i++) { 219 | var item = transits[i], segments = item.segments; 220 | item.cost = parseInt(item.cost); 221 | item.distance = $.distance(item.distance); 222 | item.walking_distance = $.distance(item.walking_distance); 223 | item.duration = $.resultFormat(item.duration); 224 | item.transport = []; 225 | for (var j = 0; j < segments.length; j++) { 226 | if (segments[j].bus.buslines.length > 0) { 227 | var name = segments[j].bus.buslines[0].name.split('(')[0]; 228 | if (j !== 0) { 229 | name = ' → ' + name; 230 | } 231 | item.transport.push(name); 232 | } 233 | if (segments[j].railway.spaces.length > 0) { 234 | var name = segments[j].railway.name; 235 | if (j !== 0) { 236 | name = ' → ' + name; 237 | } 238 | item.transport.push(name); 239 | } 240 | } 241 | } 242 | wx.setStorageSync('transits', transits); 243 | 244 | var transits = { 245 | transits: transits 246 | }, 247 | other = { 248 | distance: $.distance(route.distance), 249 | cost: route.taxi_cost ? parseInt(route.taxi_cost) : false, 250 | showMap: false, 251 | showDetail: false, 252 | showNav: false, 253 | showBusPaths: true 254 | }; 255 | that.setData(transits); 256 | that.setData(other); 257 | temp[1] = { 258 | transits: transits, 259 | other: other 260 | }; 261 | that.setData({ 262 | cache: temp 263 | }); 264 | wx.hideNavigationBarLoading(); 265 | } 266 | }) 267 | }, 268 | //切换公交出行方案 269 | transferOpts: function () { 270 | var that = this, itemList = ['最便捷', '最经济', '少换乘', '少步行', '不坐地铁']; 271 | wx.showActionSheet({ 272 | itemList: itemList, 273 | success: function (res) { 274 | var type = (res.tapIndex == 4) ? (res.tapIndex + 1) : res.tapIndex; 275 | that.getTransitRoute(type, true); 276 | that.setData({ 277 | selectType: itemList[res.tapIndex] 278 | }) 279 | } 280 | }) 281 | }, 282 | //导航 283 | showNav: function () { 284 | wx.openLocation({ 285 | name: this.data.opts.name, 286 | address: this.data.opts.address, 287 | latitude: Number(this.data.opts.POIlatitude), 288 | longitude: Number(this.data.opts.POIlongitude) 289 | }) 290 | }, 291 | onShareAppMessage: function () { 292 | return { 293 | title: this.data.opts.name + '(' + this.data.opts.address + ')', 294 | path: '/pages/route-detail/route-detail?share=share&query=' + JSON.stringify(this.data.opts) 295 | } 296 | } 297 | 298 | }) --------------------------------------------------------------------------------