├── pages ├── info │ ├── info.json │ ├── info.wxml │ ├── info.js │ └── info.wxss ├── index │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── index.js ├── routes │ ├── routes.json │ ├── routes.wxml │ ├── routes.wxss │ └── routes.js ├── inputtip │ ├── inputtip.json │ ├── inputtip.wxml │ ├── inputtip.wxss │ └── inputtip.js └── weather │ ├── weather.json │ ├── weather.wxss │ ├── weather.wxml │ └── weather.js ├── images ├── jt.png ├── map1.png ├── map2.png ├── marker.png ├── circle1.png ├── circle2.png ├── weather1.png ├── weather2.png ├── mapicon_navi_e.png ├── mapicon_navi_s.png └── marker_checked.png ├── app.js ├── README.md ├── app.wxss ├── utils ├── util.js ├── amap.js ├── wechat.js └── amap-wx.js ├── project.config.json └── app.json /pages/info/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "详情" 3 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "地图" 3 | } -------------------------------------------------------------------------------- /pages/routes/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "路线" 3 | } -------------------------------------------------------------------------------- /pages/inputtip/inputtip.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "搜索" 3 | } -------------------------------------------------------------------------------- /pages/weather/weather.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "天气查询 - 当前实时天气" 3 | } -------------------------------------------------------------------------------- /images/jt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/jt.png -------------------------------------------------------------------------------- /images/map1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/map1.png -------------------------------------------------------------------------------- /images/map2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/map2.png -------------------------------------------------------------------------------- /images/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/marker.png -------------------------------------------------------------------------------- /images/circle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/circle1.png -------------------------------------------------------------------------------- /images/circle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/circle2.png -------------------------------------------------------------------------------- /images/weather1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/weather1.png -------------------------------------------------------------------------------- /images/weather2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/weather2.png -------------------------------------------------------------------------------- /images/mapicon_navi_e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/mapicon_navi_e.png -------------------------------------------------------------------------------- /images/mapicon_navi_s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/mapicon_navi_s.png -------------------------------------------------------------------------------- /images/marker_checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzwwjjdj319/miniProgramAmap/HEAD/images/marker_checked.png -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | let wechat = require('./utils/wechat.js'); 3 | App({ 4 | onLaunch() { 5 | } 6 | }) 7 | -------------------------------------------------------------------------------- /pages/info/info.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{item.instruction}} 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # miniProgramAmap 2 | 微信小程序基于高德地图API出行路线规划,地图导航 3 | ## [效果,说明](http://blog.csdn.net/zzwwjjdj1/article/details/79425220) 4 | 体验二维码，微信扫一扫 ![avatar](https://nodejs999.com/images/dt.png) 5 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /pages/inputtip/inputtip.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.name}} 6 | -------------------------------------------------------------------------------- /pages/weather/weather.wxss: -------------------------------------------------------------------------------- 1 | .container{ 2 | position: absolute; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | right: 0; 7 | background: #4D8AD7; 8 | color: #fff; 9 | font-size: 18px; 10 | } 11 | .container text{ 12 | display: block; 13 | margin: 40rpx; 14 | } -------------------------------------------------------------------------------- /pages/info/info.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | let util = require('../../utils/util.js'); 3 | let wechat = require("../../utils/wechat"); 4 | let amap = require("../../utils/amap"); 5 | Page({ 6 | data: { 7 | steps: [], 8 | }, 9 | onLoad() { 10 | let steps = wx.getStorageSync("steps"); 11 | this.setData({ steps }) 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /pages/inputtip/inputtip.wxss: -------------------------------------------------------------------------------- 1 | .section{ 2 | height: 30px; 3 | width: 100%; 4 | } 5 | .section input{ 6 | width:90%; 7 | margin:5px auto; 8 | border:1px solid #c3c3c3; 9 | height:30px; 10 | border-radius: 3px; 11 | padding: 0 5px; 12 | } 13 | .text_box{ 14 | margin: 10px 25px; 15 | border-bottom:1px solid #c3c3c3; 16 | padding-bottom:10px 17 | } -------------------------------------------------------------------------------- /pages/weather/weather.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{weather.city.text}} : {{weather.city.data}} 3 | {{weather.weather.text}} : {{weather.weather.data}} 4 | {{weather.temperature.text}} : {{weather.temperature.data}} ℃ 5 | 风速 : {{weather.winddirection.data}} {{weather.windpower.data}} 6 | {{weather.humidity.text}} : {{weather.humidity.data}} 7 | -------------------------------------------------------------------------------- /pages/weather/weather.js: -------------------------------------------------------------------------------- 1 | let app = getApp(); 2 | let wechat = require("../../utils/wechat"); 3 | let amap = require("../../utils/amap"); 4 | 5 | Page({ 6 | data: { 7 | weather: {} 8 | }, 9 | onLoad() { 10 | amap.getWeather() 11 | .then(d => { 12 | console.log(d); 13 | this.setData({ 14 | weather: d 15 | }); 16 | }) 17 | .catch(e => { 18 | console.log(e); 19 | }) 20 | } 21 | }) -------------------------------------------------------------------------------- /pages/info/info.wxss: -------------------------------------------------------------------------------- 1 | .flex-style{ 2 | display: -webkit-box; 3 | display: -webkit-flex; 4 | display: flex; 5 | } 6 | .flex-item{ 7 | height: 35px; 8 | line-height: 35px; 9 | text-align: center; 10 | -webkit-box-flex: 1; 11 | -webkit-flex: 1; 12 | flex: 1 13 | } 14 | .flex-item.active{ 15 | color:#0091ff; 16 | } 17 | .text_box{ 18 | margin: 0 15px; 19 | padding: 15px 0; 20 | border-bottom: 1px solid #c3c3c3; 21 | font-size: 13px; 22 | } 23 | .text_box .text_item{display:inline-block;line-height: 8px;} 24 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 工具类 3 | */ 4 | class Util { 5 | static formatTime(date) { 6 | let year = date.getFullYear(); 7 | let month = date.getMonth() + 1; 8 | let day = date.getDate(); 9 | 10 | let hour = date.getHours(); 11 | let minute = date.getMinutes(); 12 | let second = date.getSeconds(); 13 | 14 | 15 | return [year, month, day].map(this.formatNumber).join('/') + ' ' + [hour, minute, second].map(this.formatNumber).join(':'); 16 | }; 17 | static formatNumber(n) { 18 | n = n.toString(); 19 | return n[1] ? n : '0' + n; 20 | }; 21 | }; 22 | 23 | module.exports = Util; -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 路线 12 | 13 | {{textData.name}} 14 | {{textData.desc}} 15 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.91", 12 | "appid": "wxad0128d4c393bfb5", 13 | "projectname": "%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE", 14 | "isGameTourist": false, 15 | "condition": { 16 | "search": { 17 | "current": -1, 18 | "list": [] 19 | }, 20 | "conversation": { 21 | "current": -1, 22 | "list": [] 23 | }, 24 | "game": { 25 | "currentL": -1, 26 | "list": [] 27 | }, 28 | "miniprogram": { 29 | "current": -1, 30 | "list": [ 31 | { 32 | "id": -1, 33 | "name": "weather", 34 | "pathName": "pages/weather/weather", 35 | "query": "" 36 | } 37 | ] 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/routes/routes", 5 | "pages/info/info", 6 | "pages/weather/weather", 7 | "pages/inputtip/inputtip" 8 | ], 9 | "window": { 10 | "backgroundTextStyle": "light", 11 | "navigationBarBackgroundColor": "#4D8AD7", 12 | "navigationBarTitleText": "WeChat", 13 | "navigationBarTextStyle": "white" 14 | }, 15 | "tabBar": { 16 | "color": "#000000", 17 | "selectedColor": "#4D8AD7", 18 | "list": [ 19 | { 20 | "pagePath": "pages/index/index", 21 | "text": "地图", 22 | "iconPath": "/images/map2.png", 23 | "selectedIconPath": "/images/map1.png" 24 | }, 25 | { 26 | "pagePath": "pages/weather/weather", 27 | "text": "天气", 28 | "iconPath": "/images/weather2.png", 29 | "selectedIconPath": "/images/weather1.png" 30 | } 31 | ] 32 | }, 33 | "networkTimeout": { 34 | "request": 15000 35 | } 36 | } -------------------------------------------------------------------------------- /pages/routes/routes.wxml: -------------------------------------------------------------------------------- 1 | 2 | 驾车 3 | 步行 4 | 公交 5 | 骑行 6 | 7 | 8 | 10 | 11 | 12 | 13 | {{distance}} 14 | {{cost}} 15 | 详情 16 | 导航 17 | 18 | 19 | 20 | 21 | {{j}} 22 | 23 | 24 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .section{ 2 | height: 30px; 3 | width: 100%; 4 | } 5 | .section input{ 6 | width:90%; 7 | margin:5px auto; 8 | border:1px solid #c3c3c3; 9 | height:30px; 10 | border-radius: 3px; 11 | padding: 0 5px; 12 | } 13 | .map_container{ 14 | position: absolute; 15 | top: 42px; 16 | bottom: 80px; 17 | left: 0; 18 | right: 0; 19 | } 20 | .map{ 21 | width: 100%; 22 | height: 100%; 23 | } 24 | .map_text{ 25 | position: absolute; 26 | left: 0; 27 | right: 0; 28 | bottom: 0px; 29 | height: 80px; 30 | background: #fff; 31 | padding: 0 15px; 32 | } 33 | text{ 34 | margin: 5px 0; 35 | display: block; 36 | font-size:12px; 37 | text-overflow: ellipsis; 38 | white-space: nowrap; 39 | overflow: hidden; 40 | } 41 | .h1{ 42 | margin: 15px 0; 43 | font-size:15px; 44 | } 45 | 46 | .map-1{ 47 | width: 160rpx; 48 | height: 160rpx; 49 | border-radius: 120rpx; 50 | background-color: #4D8AD7; 51 | display: flex; 52 | flex-direction: column; 53 | justify-content: center; 54 | align-items: center; 55 | color:#ffffff; 56 | font-size: 34rpx; 57 | position: absolute; 58 | top:0rpx; 59 | right: 40rpx; 60 | } 61 | 62 | .map-1 image{ 63 | width: 60rpx; 64 | height: 80rpx; 65 | } -------------------------------------------------------------------------------- /pages/routes/routes.wxss: -------------------------------------------------------------------------------- 1 | .flex-style{ 2 | display: -webkit-box; 3 | display: -webkit-flex; 4 | display: flex; 5 | } 6 | .flex-item{ 7 | height: 35px; 8 | line-height: 35px; 9 | text-align: center; 10 | -webkit-box-flex: 1; 11 | -webkit-flex: 1; 12 | flex: 1 13 | } 14 | .flex-item.active{ 15 | color:#0091ff; 16 | } 17 | .map_box{ 18 | position:absolute; 19 | top: 35px; 20 | bottom: 90px; 21 | left: 0px; 22 | right: 0px; 23 | } 24 | #navi_map{ 25 | width: 100%; 26 | height: 100%; 27 | } 28 | .text_box{ 29 | position:absolute; 30 | height: 90px; 31 | bottom: 0px; 32 | left: 0px; 33 | right: 0px; 34 | } 35 | .text_box .text{ 36 | margin: 15px; 37 | } 38 | .detail_button{ 39 | position:absolute; 40 | bottom: 50px; 41 | right: 10px; 42 | padding: 3px 5px; 43 | color: #fff; 44 | background: #0091ff; 45 | width:50px; 46 | text-align:center; 47 | border-radius:5px; 48 | } 49 | .detail_button2{ 50 | position:absolute; 51 | bottom: 10px; 52 | right: 10px; 53 | padding: 3px 5px; 54 | color: #fff; 55 | background: #0091ff; 56 | width:50px; 57 | text-align:center; 58 | border-radius:5px; 59 | } 60 | 61 | .bus_box{ 62 | margin: 0 15px; 63 | padding: 15px 0; 64 | border-bottom: 1px solid #c3c3c3; 65 | font-size: 13px; 66 | } 67 | .bus_box .bus_item{display:inline-block;line-height: 8px;} 68 | -------------------------------------------------------------------------------- /utils/amap.js: -------------------------------------------------------------------------------- 1 | let amapFile = require("./amap-wx"); 2 | // 高德开发者key 3 | let key = '3d4ec7915f7ff5e82xxxxxxxxxxxxxxx'; 4 | let myAmapFun = new amapFile.AMapWX({ key }); 5 | 6 | class Amap { 7 | /** 8 | * 获取POI数据 9 | * @param {string} querykeywords 10 | */ 11 | static getPoiAround(querykeywords = '') { 12 | return new Promise((resolve, reject) => myAmapFun.getPoiAround({ querykeywords, success: resolve, fail: reject })); 13 | } 14 | 15 | /** 16 | * 获取地理描述数据 17 | */ 18 | static getRegeo() { 19 | return new Promise((resolve, reject) => myAmapFun.getRegeo({ success: resolve, fail: reject })); 20 | } 21 | /** 22 | * 获取天气数据 23 | * 24 | */ 25 | static getWeather() { 26 | return new Promise((resolve, reject) => myAmapFun.getWeather({ success: resolve, fail: reject })); 27 | } 28 | 29 | /** 30 | * 获取输入提示词 31 | * @param {string} keywords 32 | * @param {string} location 33 | */ 34 | static getInputtips(city, location = '', keywords = '') { 35 | return new Promise((resolve, reject) => myAmapFun.getInputtips({ keywords, location, city, success: resolve, fail: reject })); 36 | } 37 | 38 | /** 39 | * 获取路线规划 40 | * type : getDrivingRoute --驾车 41 | * type : getWalkingRoute --步行 42 | * type : getTransitRoute --公交 43 | * type : getRidingRoute --骑行 44 | * @param {string} origin 45 | * @param {string} destination 46 | */ 47 | static getRoute(origin, destination, type, city) { 48 | return new Promise((resolve, reject) => myAmapFun[type]({ origin, destination, city, success: resolve, fail: reject })); 49 | } 50 | } 51 | 52 | module.exports = Amap; -------------------------------------------------------------------------------- /pages/inputtip/inputtip.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | let util = require('../../utils/util.js'); 3 | let wechat = require("../../utils/wechat"); 4 | let amap = require("../../utils/amap"); 5 | Page({ 6 | data: { 7 | lonlat: "", 8 | city: "", 9 | tips: [] 10 | }, 11 | onLoad(e) { 12 | let { lonlat, city } = e; 13 | this.setData({ 14 | lonlat, city 15 | }) 16 | }, 17 | bindInput(e) { 18 | // console.log(e); 19 | let { value } = e.detail; 20 | let { lonlat, city } = this.data; 21 | amap.getInputtips(city, lonlat, value) 22 | .then(d => { 23 | // console.log(d); 24 | if (d && d.tips) { 25 | this.setData({ 26 | tips: d.tips 27 | }); 28 | } 29 | }) 30 | .catch(e => { 31 | console.log(e); 32 | }) 33 | }, 34 | bindSearch(e) { 35 | console.log(e); 36 | let { keywords } = e.target.dataset; 37 | let pages = getCurrentPages(); 38 | let prevPage = pages[pages.length - 2]; //上一个页面 39 | // console.log(pages); 40 | if (keywords) { 41 | prevPage.setData({ keywords }); 42 | amap.getPoiAround(keywords) 43 | .then(d => { 44 | // console.log(d); 45 | let { markers } = d; 46 | markers.forEach(item => { 47 | item.iconPath = "/images/marker.png"; 48 | }) 49 | prevPage.setData({ markers }); 50 | prevPage.showMarkerInfo(markers[0]); 51 | prevPage.changeMarkerColor(0); 52 | }) 53 | .catch(e => { 54 | console.log(e); 55 | }) 56 | } 57 | let url = `/pages/index/index`; 58 | wx.switchTab({ url }) 59 | } 60 | }); 61 | -------------------------------------------------------------------------------- /utils/wechat.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promise化小程序接口 3 | */ 4 | class Wechat { 5 | /** 6 | * 登陆 7 | * @return {Promise} 8 | */ 9 | static login() { 10 | return new Promise((resolve, reject) => wx.login({ success: resolve, fail: reject })); 11 | }; 12 | 13 | /** 14 | * 获取用户信息 15 | * @return {Promise} 16 | */ 17 | static getUserInfo() { 18 | return new Promise((resolve, reject) => wx.getUserInfo({ success: resolve, fail: reject })); 19 | }; 20 | 21 | /** 22 | * 设置本地数据缓存 23 | * @param {string} key 24 | * @param {string} value 25 | * @return {Promise} 26 | */ 27 | static setStorage(key, value) { 28 | return new Promise((resolve, reject) => wx.setStorage({ key: key, data: value, success: resolve, fail: reject })); 29 | }; 30 | 31 | /** 32 | * 获取本地数据缓存 33 | * @param {string} key 34 | * @return {Promise} 35 | */ 36 | static getStorage(key) { 37 | return new Promise((resolve, reject) => wx.getStorage({ key: key, success: resolve, fail: reject })); 38 | }; 39 | 40 | /** 41 | * 获取当前位置 42 | * @param {string} type 43 | * @return {Promise} 44 | */ 45 | static getLocation(type) { 46 | return new Promise((resolve, reject) => wx.getLocation({ type: type, success: resolve, fail: reject })); 47 | }; 48 | 49 | /** 50 | * 发起网络请求 51 | * @param {string} api 52 | * @param {string} path 53 | * @param {object} params 54 | * @return {Promise} 55 | */ 56 | static request(api, path, params) { 57 | return new Promise((resolve, reject) => { 58 | let opts = { 59 | url: `${api}/${path}`, 60 | data: Object.assign({}, params), 61 | header: { 'Content-Type': 'json' }, 62 | success: resolve, 63 | fail: reject 64 | } 65 | wx.request(opts); 66 | }); 67 | }; 68 | }; 69 | 70 | module.exports = Wechat; -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | let app = getApp(); 4 | let wechat = require("../../utils/wechat"); 5 | let amap = require("../../utils/amap"); 6 | let markersData = []; 7 | Page({ 8 | data: { 9 | markers: [], 10 | latitude: '', 11 | longitude: '', 12 | textData: {}, 13 | city: '', 14 | markerId: 0, 15 | controls: [ 16 | { 17 | id: 0, 18 | position: { 19 | left: 10, 20 | top: 200, 21 | width: 40, 22 | height: 40 23 | }, 24 | iconPath: "/images/circle1.png", 25 | clickable: true 26 | } 27 | ] 28 | }, 29 | onLoad(e) { 30 | amap.getRegeo() 31 | .then(d => { 32 | console.log(d); 33 | let { name, desc, latitude, longitude } = d[0]; 34 | let { city } = d[0].regeocodeData.addressComponent; 35 | this.setData({ 36 | city, 37 | latitude, 38 | longitude, 39 | textData: { name, desc } 40 | }) 41 | }) 42 | .catch(e => { 43 | console.log(e); 44 | }) 45 | }, 46 | bindInput() { 47 | let { latitude, longitude, city } = this.data; 48 | let url = `/pages/inputtip/inputtip?city=${city}&lonlat=${longitude},${latitude}`; 49 | wx.navigateTo({ url }); 50 | }, 51 | makertap(e) { 52 | // console.log(e); 53 | let { markerId } = e; 54 | let { markers } = this.data; 55 | let marker = markers[markerId]; 56 | // console.log(marker); 57 | this.showMarkerInfo(marker); 58 | this.changeMarkerColor(markerId); 59 | }, 60 | showMarkerInfo(data) { 61 | let { name, address: desc } = data; 62 | this.setData({ 63 | textData: { name, desc } 64 | }) 65 | }, 66 | changeMarkerColor(markerId) { 67 | let { markers } = this.data; 68 | markers.forEach((item, index) => { 69 | item.iconPath = "/images/marker.png"; 70 | if (index == markerId) item.iconPath = "/images/marker_checked.png"; 71 | }) 72 | this.setData({ markers, markerId }); 73 | }, 74 | getRoute() { 75 | // 起点 76 | let { latitude, longitude, markers, markerId, city, textData } = this.data; 77 | let { name, desc } = textData; 78 | if (!markers.length) return; 79 | // 终点 80 | let { latitude: latitude2, longitude: longitude2 } = markers[markerId]; 81 | let url = `/pages/routes/routes?longitude=${longitude}&latitude=${latitude}&longitude2=${longitude2}&latitude2=${latitude2}&city=${city}&name=${name}&desc=${desc}`; 82 | wx.navigateTo({ url }); 83 | }, 84 | clickcontrol(e) { 85 | console.log("回到用户当前定位点"); 86 | let { controlId } = e; 87 | let mpCtx = wx.createMapContext("map"); 88 | mpCtx.moveToLocation(); 89 | }, 90 | mapchange() { 91 | // console.log("改变视野"); 92 | } 93 | }) 94 | -------------------------------------------------------------------------------- /pages/routes/routes.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | let util = require('../../utils/util.js'); 3 | let wechat = require("../../utils/wechat"); 4 | let amap = require("../../utils/amap"); 5 | Page({ 6 | data: { 7 | cindex: "0", 8 | types: ["getDrivingRoute", "getWalkingRoute", "getTransitRoute", "getRidingRoute"], 9 | markers: [], 10 | polyline: [], 11 | distance: '', 12 | cost: '', 13 | transits: [], 14 | city: "", 15 | name: "", 16 | desc: "" 17 | }, 18 | onLoad(e) { 19 | let { latitude, longitude, latitude2, longitude2, city, name, desc } = e; 20 | let markers = [ 21 | { 22 | iconPath: "/images/mapicon_navi_s.png", 23 | id: 0, 24 | latitude, 25 | longitude, 26 | width: 23, 27 | height: 33 28 | }, { 29 | iconPath: "/images/mapicon_navi_e.png", 30 | id: 1, 31 | latitude: latitude2, 32 | longitude: longitude2, 33 | width: 24, 34 | height: 34 35 | } 36 | ]; 37 | 38 | this.setData({ 39 | latitude, longitude, latitude2, longitude2, markers, city, name, desc 40 | }); 41 | this.getRoute(); 42 | }, 43 | changeType(e) { 44 | let { id } = e.target.dataset; 45 | let { cindex } = this.data; 46 | if (id == cindex) return; 47 | this.setData({ cindex: id }); 48 | this.getRoute(); 49 | }, 50 | getRoute() { 51 | let { latitude, longitude, latitude2, longitude2, types, cindex, city } = this.data; 52 | let type = types[cindex]; 53 | let origin = `${longitude},${latitude}`; 54 | let destination = `${longitude2},${latitude2}`; 55 | amap.getRoute(origin, destination, type, city) 56 | .then(d => { 57 | // console.log(d); 58 | this.setRouteData(d, type); 59 | }) 60 | .catch(e => { 61 | console.log(e); 62 | }) 63 | }, 64 | setRouteData(d, type) { 65 | if (type != "getTransitRoute") { 66 | let points = []; 67 | if (d.paths && d.paths[0] && d.paths[0].steps) { 68 | let steps = d.paths[0].steps; 69 | wx.setStorageSync("steps", steps); 70 | steps.forEach(item1 => { 71 | let poLen = item1.polyline.split(';'); 72 | poLen.forEach(item2 => { 73 | let obj = { 74 | longitude: parseFloat(item2.split(',')[0]), 75 | latitude: parseFloat(item2.split(',')[1]) 76 | } 77 | points.push(obj); 78 | }) 79 | }) 80 | } 81 | this.setData({ 82 | polyline: [{ 83 | points: points, 84 | color: "#0091ff", 85 | width: 6 86 | }] 87 | }); 88 | } 89 | else { 90 | if (d && d.transits) { 91 | let transits = d.transits; 92 | transits.forEach(item1 => { 93 | let { segments } = item1; 94 | item1.transport = []; 95 | segments.forEach((item2, j) => { 96 | if (item2.bus && item2.bus.buslines && item2.bus.buslines[0] && item2.bus.buslines[0].name) { 97 | let name = item2.bus.buslines[0].name; 98 | if (j !== 0) { 99 | name = '--' + name; 100 | } 101 | item1.transport.push(name); 102 | } 103 | }) 104 | }) 105 | this.setData({ transits }); 106 | } 107 | } 108 | if (type == "getDrivingRoute") { 109 | if (d.paths[0] && d.paths[0].distance) { 110 | this.setData({ 111 | distance: d.paths[0].distance + '米' 112 | }); 113 | } 114 | if (d.taxi_cost) { 115 | this.setData({ 116 | cost: '打车约' + parseInt(d.taxi_cost) + '元' 117 | }); 118 | } 119 | } 120 | else if (type == "getWalkingRoute" || type == "getRidingRoute") { 121 | if (d.paths[0] && d.paths[0].distance) { 122 | this.setData({ 123 | distance: d.paths[0].distance + '米' 124 | }); 125 | } 126 | if (d.paths[0] && d.paths[0].duration) { 127 | this.setData({ 128 | cost: parseInt(d.paths[0].duration / 60) + '分钟' 129 | }); 130 | } 131 | } 132 | else if (type == "getRidingRoute") { 133 | 134 | } 135 | }, 136 | goDetail() { 137 | let url = `/pages/info/info`; 138 | wx.navigateTo({ url }); 139 | }, 140 | nav() { 141 | let { latitude2, longitude2, name, desc } = this.data; 142 | wx.openLocation({ 143 | latitude: +latitude2, 144 | longitude: +longitude2, 145 | name, 146 | address: desc 147 | }); 148 | } 149 | }); 150 | -------------------------------------------------------------------------------- /utils/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