uni-app map 地图

html

<template><view class="box"><!--   <view class="inputDevice"></view> --><view class="container"><u-sticky><!-- 只能有一个根元素 --><view class="sticky" style="background: #fff;"><u-search placeholder="搜索设备名称" v-model="describeName" @custom='searchClick'></u-search></view></u-sticky></view><view class="page-body"><view class="page-section page-section-gap"><map style="width: 100%; height: 650px;" :latitude="latitude" :longitude="longitude" :markers="covers"@markertap="markertap" @tap="tap"></map></view></view></view>
</template>

<script>export default {data() {return {id: 0, // 使用 marker点击事件 需要填写idtitle: 'map',// 地图中心点latitude: 39.909,longitude: 116.39742,// 地图信息covers: [],// 搜索设备名称describeName: "",windowHeight:""}},onShow() {this.getDataList()uni.getSystemInfo({success: function (res) {this.windowHeight = res.windowHeight + "px"console.log(res.windowHeight)}})},methods: {// 搜索clicksearchClick(e) {const parameter = {pageNum: 1,pageSize: 10,name: e}this.$api.listInstance(parameter).then(res => {this.latitude = res.rows.locationLatitudes,this.longitude = res.rows.locationLongitudes})},// list数据getDataList() {this.$api.listInstances().then(res => {// this.dataList = res.dataconsole.log(res.rows)const dataList = res.rowsconst covers = []dataList.forEach((e) => {console.log(e.id)this.covers.push({value: e.id,latitude: e.locationLatitudes - 0.006,longitude: e.locationLongitudes - 0.0065})})})},// 标记点的点击事件markertap(e) {console.log("===你点击了标记点===")console.log(e.detail)},//点击地图时触发; 事件tap(e) {// console.log("===你点击了地图点===")console.log(e.detail)},}}
</script>

uni-app map 地图相关推荐

uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uniapp使用map地图组件
本人所在的公司最近在做共享电动车的项目,打开该应用看到的就是一副地图,可以获取附近共享电动车的地址.状态等信息,开发这个应用程序还需要在地图上规划路线.动态显示轨迹.轨迹回放等功能.共享开发的项目功能 ...
uni-app（微信小程序）编写小程序加载map地图总结
因为自己想在手机端开发一个应用要应用Vue框架,所以就想到了uni-app,其中一个模块就要加载地图并获取位置信息.这个uni官网给了api,调用也还方面,现就开发中的思路和几个关键方法进行说明,由于 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
uni-app使用map组件开发map地图，获取后台返回经纬度进行标点
unia-pp实现map组件,获取后台返回经纬度进行标点官方文档使用步骤代码示例官方文档使用步骤使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发 ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
【ROS RIKIBOT 基础--使用系列第八章节】超声波跟随、雷达跟随、手机APP建地图、视觉单线寻线
1.RIKIBOT 超声波跟随 1.1 把小车平放在地板上,用远程软件登录到小车系统上,打开一个终端启动 roslaunch rikibot bringup.launch. 1.2再打开一个终端,启动 ...
AR 3D Map地图技术
AR 3D Map地图技术工业AR的创业相对于消费级AR的创业难很多,这里有一个市场的天然门槛和壁垒,对工业场景不理解,就做不出符合工业场景的AR产品. 人才壁垒工业AR创业对创始人和联合创始人的 ...

uni-app map 地图

uni-app map 地图相关推荐

最新文章

热门文章