<template>
<view class="content">
<map style="width: 100%; height: 700px;" :layer-style='5' :show-location='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
</map>
</view>
</template>
<style>
</style>
<script>
export default {
data() {
return {
deviceId:"",
latitude:34.270908, //纬度
longitude:117.306763,//经度
scale:10,//缩放级别
bottomData:false,
marker: [
// {
// id:0,
// latitude: 34.270908,//纬度
// longitude: 117.306763,//经度
// iconPath: '/static/map/camera.png', //显示的图标
// rotate:0, // 旋转度数
// width:30, //宽
// height:30, //高
// // title:'我在这里',//标注点名
// alpha:0.5, //透明度
// callout:{//自定义标记点上方的气泡窗口 点击有效
// content:'赛菲迪路段',//文本
// color:'#ffffff',//文字颜色
// fontSize:14,//文本大小
// borderRadius:15,//边框圆角
// borderWidth:'10',
// bgColor:'#e51860',//背景颜色
// display:'ALWAYS',//常显
// },
// },
],
}
},
onLoad() {
this.getGps();
},
mounted(){
this.getGps();
},
computed:{
mapheight(){
let data =''
if(this.bottomData){
if(this.upTop){
data ='50px'
}else{
data ='200px'
}
}else{
data ='90vh'
}
return data
},
coverbottom(){
let data =''
if(this.bottomData){
data ='20rpx'
}else{
data ='100rpx'
}
return data
}
},
methods:{
//地图点击事件
markertap(e) {
console.log()
uni.navigateTo({
url: '/pages/win/win?deviceId='+e.detail.markerId
})
console.log("===你点击了标记点===", e)
},
//地图点击事件
callouttap(e){
console.log('地图点击事件',e)
},
getGps(){
this.$request({
url: "api/picture/getDevice",
method:"GET"
}).then(res => {
console.log("=============")
console.log(res.data);
console.log("=============")
var markerMap=[];
var obj;
var map=res.data.data;
for(var i=0;i<map.length;i++) {
obj = {
id:map[i].id,
latitude: map[i].latitude,//纬度
longitude: map[i].longitude,//经度
iconPath: '/static/map/camera.png', //显示的图标
rotate:0, // 旋转度数
width:30, //宽
height:30, //高
// title:'我在这里',//标注点名
alpha:0.5, //透明度
callout:{//自定义标记点上方的气泡窗口 点击有效
content: map[i].name,//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:15,//边框圆角
borderWidth:'10',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
}
markerMap.push(obj);
}
this.marker=markerMap;
})
}
}
}
</script>
import config from "./config.js"
export const request = function a(options) {
{
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('token')
// console.log(token)
// 在登录的时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")
uni.request({
url: config.baseUrl + options.url,
data: options.data || {},
method: options.method || 'POST',
header: options.header || {
// 根据实际接口设计 key 取 token 或者 authorization
token: token,
"content-type": 'application/json'
},
success: (res) => {
// 控制台显示数据信息
resolve(res)
},
fail: (err) => {
// 页面中弹框显示失败
uni.showToast({
title: '请求接口失败'
})
// 返回错误消息
reject(err)
},
catch: (e) => {
console.log(e);
}
})
})
}
}
5 个回复
爱豆豆 - 办法总比困难多
能发个可以复现的demo出来吗 你这个代码片段很难看出来啥
锦鲤丶接单丶 - 锦鲤丶接单丶18560000860丶10+年开发经验
借楼小小推广一下,欢迎体验一下我上传的通用请求封装插件:https://ext.dcloud.net.cn/plugin?id=17539
1***@qq.com (作者)
import config from "./config.js"
export const request = function a(options) {
{
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('token')
// console.log(token)
// 在登录的时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")
uni.request({
url: config.baseUrl + options.url,
data: options.data || {},
method: options.method || 'POST',
header: options.header || {
// 根据实际接口设计 key 取 token 或者 authorization
token: token,
"content-type": 'application/json'
},
success: (res) => {
// 控制台显示数据信息
resolve(res)
},
fail: (err) => {
// 页面中弹框显示失败
uni.showToast({
title: '请求接口失败'
})
// 返回错误消息
reject(err)
},
catch: (e) => {
console.log(e);
}
})
})
}
} 这是request
export default {
baseUrl: "http://192.168.2.6:8083/"
}
这是config
<template>
<view class="content">
<map style="width: 100%; height: 700px;" :layer-style='5' :show-location='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
</template>
<style>
</style>
<script>
export default {
data() {
return {
deviceId:"",
latitude:34.270908, //纬度
longitude:117.306763,//经度
scale:10,//缩放级别
bottomData:false,
marker: [
// {
// id:0,
// latitude: 34.270908,//纬度
// longitude: 117.306763,//经度
// iconPath: '/static/map/camera.png', //显示的图标
// rotate:0, // 旋转度数
// width:30, //宽
// height:30, //高
// // title:'我在这里',//标注点名
// alpha:0.5, //透明度
// callout:{//自定义标记点上方的气泡窗口 点击有效
// content:'赛菲迪路段',//文本
// color:'#ffffff',//文字颜色
// fontSize:14,//文本大小
// borderRadius:15,//边框圆角
// borderWidth:'10',
// bgColor:'#e51860',//背景颜色
// display:'ALWAYS',//常显
// },
// },
</script>这是首页地图展示 运行到手机上说this.$request不是方法,但是在内置浏览器上没问题
锦鲤丶接单丶
你的$request在main.js中挂载到vue上了么
2024-04-17 14:35
爱豆豆
我的意思是 你可以创建一个空项目 把你的代码放进去 然后压缩下发出来
这样我可以直接下载运行你的代码
你的request在哪里引入了?
2024-04-17 14:36
1***@qq.com (作者)
import App from './App'
import store from '@/store'
import uView from '@/uni_modules/uview-ui'
import Vue from 'vue'
import {request} from 'pages/util/request.js'
Vue.prototype.$request = request
Vue.use(uView)
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()这是我的main。js
锦鲤丶接单丶
你这这这这这这这这,把util放到pages里面?
2024-04-17 14:52
锦鲤丶接单丶
虽然说应该不是这的原因
2024-04-17 14:52
1***@qq.com (作者)
回复 锦鲤丶接单丶: 我不是专业的,我是搞微服务和嵌入式的,没办法临时顶替
2024-04-17 14:55
困难总比办法多
不用内置的浏览器,运行到chrome能运行吗