微信小程序-添加一个地图导航图

最新推荐文章于 2025-07-05 16:24:12 发布

XGB的工具箱

最新推荐文章于 2025-07-05 16:24:12 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：那些用过的微信小程序技术文章标签：微信小程序导航地图

本文链接：https://blog.youkuaiyun.com/weixin_41603612/article/details/81204839

那些用过的微信小程序技术专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用wxml和js实现的地图组件应用案例，通过设定经纬度展示特定位置，并实现了点击地图标记后跳转到详细地图的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml代码：

<view class='ditu'>
   <view>
  <map id="map" longitude="112.682800" latitude="37.7299564" markers="{{markers}}"  
  scale="18"  style="width: 100%; height: 300px;" bindtap="click">  
  </map>  
  </view>
</view>

分析：

longitude="112.682800" 设置中心纬度

latitude="37.7299564" 设置中心经度

style="width: 100%; height: 300px;"

显示图片的的大小

宽度：100%；

高度：300px；

bindtap="click" ：添加一个点击事件

js 代码：

 
data: {
    markers: [{
      iconPath: "", //浮标样式
      id: 0,
      latitude: 37.7299564, //浮标位置
      longitude: 112.682800,
      width: 35,  //浮标大小
      height: 45
    }],
  },

<!-- 点击事件js代码  -->
click: function (e) {
    wx.openLocation({
      latitude: 37.7299564, //目的地位置
      longitude: 112.682800,
      scale: 18,
      name: '位置名字', //自定义
      address: '位置名字后的备注' //自定义
    })
  },

点击后会跳转到外部地图。

目的地为写的坐标。