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


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 相关文章推荐
收集json解析的四种方法分享
Jan 17 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 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
第十四节--命名空间
2006/11/16 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
浅谈PHP进程管理
2019/03/08 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技