收藏此站 营销型网站标准 微商城/小程序商城
当前位置:首页>新闻中心>技术日志 > 小程序教程之腾讯地图及导航的使用

小程序教程之腾讯地图及导航的使用

作者:「美橙网」-苏州美橙之星信息科技有限公司 . 阅读量:28 . 发表时间:2020-08-27 15:59:04

首先在wxml文件中输入地图代码,相关内容自行查阅小程序开发教程


<map class="maps" id="map" longitude="112.8977300000" latitude="28.2174900000" scale="16" style="width:100%;height:500rpx;" bindtap="mapclick" markers="{{markers}}"></map>

longitude:经度

latitude:纬度

markers:标记(这个要动态的传递数值,所以这里就使用{{markers}})

下面就是markers的数值传递,在page的data中设置markers数组的值

Page({
  data: {
    markers: [{
      iconPath: "/images/location.png",//定位图标
      id: 0,
      latitude: 28.2174900000,//纬度
      longitude: 112.8977300000,//经度
      width: 50,//图标宽
      height: 50,//图标高
    }],
  }, 
})

这样前端的地图组件就定位完成!



下一步操作就是怎么进行直接导航,这里使用微信自带的导航组件wx.openLocation(相关内容自行查阅小程序开发教程)

首先在地图上绑定一个事件,使用bindtap="mapclick" 来绑定点击地图的操作事件mapclick,然后就是设置点击事件。

mapclick: function () {
    wx.openLocation({
      latitude: 28.2174900000,//纬度
      longitude: 112.8977300000,//经度
      scale: 18,//缩放
      name: '苏州竹子网络科技有限公司',
      address: '苏州相城区中翔大厦15012'
    })
  },



美橙网-banner

关键词:苏州网站建设,苏州网络推广,苏州网络公司,苏州微信公众号开发,苏州微信小程序开发,苏州APP定制开发,苏州SEO优化,苏州商城网站,苏州网站开发,苏州营销型网站建设

想知道您的网站是营销型网站吗
美橙网免费为您提供专业的网站诊断方案,赶紧预约吧!今天还剩3个名额
美橙网产品
四网合一(微信/小程序) 营销型网站标准 微商城/小程序商城 竞价托管
美橙网服务
7x24小时售后支持 网站免费诊断 技术上门服务 后台培训,定期回访
新闻中心
公司新闻 网站建设/SEO优化 技术日志
关于美橙网
美橙网介绍 联系美橙网 美橙网团队 诚聘英才
全国咨询热线
4006-711-8864006-711-886
服务热线:4006-711-886
美橙网微信扫一扫
COPYRIGHT © 2011-2020 美橙网 ALL RIGHTS RESERVED
地址:苏州市相城区相城大道666号中翔大厦15楼 | 苏ICP备20012076号
加入收藏 立即咨询美橙网 联系美橙网