小程序之地图标注以及导航

简单说一下遇到的问题，标注点出不来情况，之后是.wxml文件中map标签行内定义longitude="{{map.lng}}" 、latitude="{{map.lat}}"、markers="{{map.markers}}"然后在.js文件中也分别定义。

.wxml文件

<view class='wc_area_mapbox'><map class='wc_area_map' bindtap='location' bindmarkertap='location' show-location longitude="{{map.lng}}" latitude="{{map.lat}}" markers="{{map.markers}}"></map>
</view>

.js文件

const app = getApp();
Page({data: {map:{lat:0,         //这里必须定义lat,lng，不然标注点出不来lng:0,markers:[],navigation:null},service_detail: [],wc_id:null,},onLoad: function (options) {var that = this;that.setData({wc_id: options.id})that.get_wc_detail();},get_wc_detail: function () {var that=this;wx.showLoading({title: '加载中',})wx.request({url: app.globalData.url + 'index.php/api/Home/service_detail',data:{id: that.data.wc_id,lng: app.globalData.location.longitude,lat: app.globalData.location.latitude},success:function(res){console.log(res)wx.hideLoading();if(res.data.status==200){that.setData({navigation: res.data.data.name,service_detail: res.data.data,'map.lat': res.data.data.lat,'map.lng':res.data.data.lng,'map.markers':[{latitude: res.data.data.lat,     //这里也定义
                            longitude: res.data.data.lng,name: res.data.data.title}]})wx.setNavigationBarTitle({title: that.data.navigation})  }else{wx.showToast({title: res.data.error,icon:'loading',duration:1000})}},fail:function(){wx.hideLoading();wx.showToast({title: '请求失败',icon:'loading',duration:1000})}})},location:function(){wx.openLocation({                    //调用导航latitude: this.data.map.lat,longitude: this.data.map.lng,name: this.data.navigation,scale: 28})}
})

转载于:https://www.cnblogs.com/wanan-01/p/9078059.html

小程序之地图标注以及导航相关推荐

微信小程序-3D地图场景+定位导航-法院3D室内导航系统-为群众提供诉讼全流程导航服务
随着互联网信息的快速发展,我国的信息化水平也得到了全面的提升.尤其近几年在疫情的影响下,微信的小程序应用已经渗入生活的方方面面,无论是日常出行的健康码还是线上商城的购物,小程序以其轻便.响应速度快.不 ...
微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...
关于小程序中地图的应用（联动搜索，模糊查询，定位导航）
小程序中地图的应用一.获取微信地址二.联动搜索及模糊查询三.导航一.获取微信地址在小程序的开发中,内置了获取微信地址的API接口.我们可以直接调用,对返回的数据进行相关的处理即可.代码如下: ...
小程序实现地图导航功能
小程序实现地图导航功能 app.json获取导航授权信息 wxml文件中命令 map组件基本命令以及作用 js文件中命令 1.在data中设置地图界面显示的经纬度 2.在data中设置标记点宽高经纬度 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面，高度怎么办
项目场景: **做一个小程序的横向二级顶部导航条,可以切换.拖动.二级定位在一级的下面** 问题描述: 我只能设置scroll-view的高度,不然不显示二级菜单这是html代码 <view ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
微信小程序之网易云音乐导航
微信小程序之网易云音乐导航微信小程序之网易云音乐(一)- uni-app的基本使用微信小程序之网易云音乐(二)- uni-app标签的使用微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...

小程序之地图标注以及导航

小程序之地图标注以及导航相关推荐

最新文章

热门文章