微信小程序地图定位导航

本文介绍如何在微信小程序中实现地图定位和导航功能。首先,由于微信更新了地理位置API,需要在app.json中配置permission字段以避免错误。接着展示WXML界面布局,包括地图显示和返回当前位置的按钮。在WXSS中,通过设置样式确保地图宽度适应屏幕。最后,重点讲解JS部分,详细阐述如何获取和使用用户位置信息进行地图操作。
摘要由CSDN通过智能技术生成

小程序获取当前位置,回到当前位置,地图定位,导航

效果

在这里插入图片描述
因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段

app.json:

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

wxml:

<!--pages/map/map.wxml-->
 
<!-- 这是地图部分 -->
 
<view class="map_container">
  <map class='map' longitude='{
  {longitude}}' latitude='{
  {latitude}}' scale='{
  {scale}}' markers='{
  {markers}}' controls="{
  {controls}}" bindcontroltap="bindcontroltap" polyline='{
  {polyline}}' circles="{
  
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值