<template>
<view>
<view class="flex-style">
<view class="flex-item" bindtouchstart="goToCar">接送距离:{{distance}}</view>
</view>
<view class="map_box">
<map id="navi_map" longitude="116.451028" latitude="39.949643" scale="12" :markers="markers" :polyline="polyline"></map>
</view>
</view>
</template>
<script>
import amapFile from '@/common/amap-wx.js';
export default {
data() {
return {
markers: [
{
iconPath: '../../../static/lcar.png',
id: 0,
latitude: 39.989643,
longitude: 116.481028,
width: 32,
height: 48
},
{
iconPath: '../../../static/luser.png',
id: 0,
latitude: 39.90816,
longitude: 116.434446,
width: 32,
height: 48
}
],
distance: '',
cost: '',
polyline: []
};
},
onReady() {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: '...' });
myAmapFun.getDrivingRoute({
origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
success: function(data) {
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
});
}
}
}
that.polyline = [
{
points: points,
color: '#0091ff',
width: 6
}
];
if (data.paths[0] && data.paths[0].distance) {
that.distance= Math.floor(data.paths[0].distance/1000) + '公里';
}
if (data.taxi_cost) {
that.cost= '打车约' + parseInt(data.taxi_cost) + '元';
}
},
fail: function(info) {}
});
},
methods: {}
};
</script>
<style>
.flex-style{
display: -webkit-box;
display: -webkit-flex;
display: flex;
background-color: #FFFFFF;
}
.flex-item{
height: 35px;
line-height: 35px;
text-align: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1
}
.flex-item.active{
color:#0091ff;
}
.map_box{
position:absolute;
top: 35px;
bottom: 0px;
left: 0px;
right: 0px;
}
navi_map{
width: 100%;
height: 100%;
}
.text_box{
position:absolute;
height: 90px;
bottom: 0px;
left: 0px;
right: 0px;
}
.text_box .text{
margin: 15px;
}
.detail_button{
position:absolute;
bottom: 30px;
right: 10px;
padding: 3px 5px;
color: #fff;
background: #0091ff;
width:50px;
text-align:center;
border-radius:5px;
}
</style>
6 个回复
开发人员 (作者) - 开发一些小程序啥的
求官方指导,急
开发人员 (作者) - 开发一些小程序啥的
求指导
开发人员 (作者) - 开发一些小程序啥的
没人管吗?大问题啊
开发人员 (作者) - 开发一些小程序啥的
问题找到了,在雷电模拟器上打不开,手机可以,有什么模拟器可以支持地图
Hokas - 走一走
夜神模拟器就可以
6***@qq.com
为什么的我的夜神模拟器也闪退