代码demo地址:https://github.com/asagcs/ceshi
我看文档上是这样写的:
translateMarker OBJECT 平移marker,带动画 app-nvue 2.1.5+、微信小程序带动画
改为vue则在小程序中可以随意跑。但是在app上不能使用。
另外,可以看到marker和定位偏差比较大。
我的代码:
<template>
<view class="wrapper">
<map class="mymap" id="trajectoryMapApp"
:latitude="latitude" :longitude="longitude"
:markers="markers"
:include-points="markers"
>
</map>
<view @tap="tapsdf">
<text>KSDFJAKSFDSFJ</text>
</view>
</view>
</template>
<script>
import mqtt from "../../libs/mqtt.min.js";
import { mapMutations } from "vuex";
import ponits from '../../data/index.json';
export default {
data() {
return {
markers: [{
id: 0,
latitude: "30.33943637197179",
longitude: '116.59881658661818',
iconPath: "/static/logo.png",
callout: {
content: "333", // 车牌信息
display: "BYCLICK",
fontWeight: "bold",
color: "#5A7BEE", //文本颜色
fontSize: "12px",
bgColor: "#ffffff", //背景色
padding: 5, //文本边缘留白
textAlign: "center",
},
width: 32,
height: 32
}],
index: 1,
latitude: '30.33943637197179',
longitude: '116.59881658661818'
}
},
created() {
},
methods: {
tapsdf: function() {
console.log("我要移动了")
let index = this.index;
var mapContext = uni.createMapContext("trajectoryMapApp", this);
let translateMarkerConfig = {
markerId: 0,
destination: {
longitude: ponits[index].longitude, // 车辆即将移动到的下一个点的经度
latitude: ponits[index].latitude, // 车辆即将移动到的下一个点的纬度
},
duration: 100,
autoRotate: true,
success: (e) => {
console.log(e)
},
fail: (err) => {
console.log(err)
}
};
this.index +=1;
console.log(translateMarkerConfig)
mapContext.translateMarker(translateMarkerConfig);
}
},
};
</script>
<style>
.wrapper {
display: flex;
flex: 1;
}
.mymap {
display: flex;
flex: 1;
height: 100vh;
width: 1005;
}
</style>
j***@163.com (作者)
正式版最新版:2.9.3.20201014
在app平台有问题,marker不移动
2020-10-26 08:40
j***@163.com (作者)
android平台
2020-10-26 08:43