微信小程序地图定位导航

最新推荐文章于 2024-07-30 17:29:02 发布

一头秃发丶

最新推荐文章于 2024-07-30 17:29:02 发布

阅读量704

点赞数 1

本文链接：https://blog.csdn.net/a15156565/article/details/105365142

版权

本文介绍如何在微信小程序中实现地图定位和导航功能。首先，由于微信更新了地理位置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="{