微信小程序获取位置展示地图并标注信息的实例代码


Posted in Javascript onSeptember 01, 2019

1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式

2.获取位置要在app.json中标明权限

3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点

index.js

//index.js
//获取应用实例
const app = getApp()
Page({
 data: {
 },
 onLoad: function () {
  var self=this;
  this.mapCtx = wx.createMapContext('myMap');
  wx.getLocation({
   type: 'gcj02',
   success(res) {
    self.setData({
     latitude : res.latitude,
     longitude : res.longitude,
     markers: [{
      id: 1,
      latitude: res.latitude,
      longitude: res.longitude,
      iconPath: '/image/location.png',
      callout:{
       content:"服务:青少年英语培训\r\n姓名:陶士涵\r\n电话:18808987876",
       bgColor:"#fff",
       padding:"5px",
       borderRadius:"2px",
       borderWidth:"1px",
       borderColor:"#07c160",
      }
     },
      {
       id: 2,
       latitude: res.latitude,
       longitude: res.longitude+0.01,
       iconPath: '/image/location.png',
       callout: {
        content: "服务:出租龙兴园西区9号楼二单元501\r\n姓名:陶士涵\r\n电话:18808987876",
        bgColor: "#fff",
        padding: "5px",
        borderRadius: "2px",
        borderWidth: "1px",
        borderColor: "#07c160",
        
       }
      }
     ],
    });
   }
  })
 },
})

index.wxml

<!--index.wxml-->
  <map
   id="myMap"
   style="width: 100%; height:100vh;"
   latitude="{{latitude}}"
   longitude="{{longitude}}"
   markers="{{markers}}"
   covers="{{covers}}"
   show-location
  ></map>

app.json

{
 "pages": [
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "找服务",
  "navigationBarTextStyle": "black"
 },
 "sitemapLocation": "sitemap.json",
 "permission": {
  "scope.userLocation": {
   "desc": "你的位置信息将用于获取周边服务" 
  }
 }
}

总结

以上所述是小编给大家介绍的微信小程序获取位置展示地图并标注信息的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
vue实现购物车加减
May 30 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
简单分析js中的this的原理
Aug 31 #Javascript
微信小程序image图片加载完成监听
Aug 31 #Javascript
JS实现使用POST方式发送请求
Aug 30 #Javascript
node.js处理前端提交的GET请求
Aug 30 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
将php数组输出html表格的方法
2014/02/24 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php微信开发之百度天气预报
2016/11/18 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
JS Timing
2007/04/21 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python爬虫基本知识
2018/03/05 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python 列表的清空方式
2020/01/13 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python 写一个水果忍者游戏
2021/01/13 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
儿子婚宴答谢词
2014/01/09 职场文书
无故旷工检讨书
2014/01/26 职场文书
21岁生日感言
2014/02/27 职场文书
合作协议书
2014/04/23 职场文书
远程培训的心得体会
2014/09/01 职场文书
道德模范事迹材料
2014/12/20 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
初中班长竞选稿
2015/11/20 职场文书
运动会主持人开幕词
2016/03/04 职场文书
财务年终工作总结大全
2019/06/20 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS