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


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 相关文章推荐
js中直接声明一个对象的方法
Aug 10 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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基于GD库画五星红旗的方法
2015/02/24 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python做简单的字符串匹配详解
2017/03/21 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python单例模式实例解析
2018/08/28 Python
python中update的基本使用方法详解
2019/07/17 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
终端业务员岗位职责
2013/11/27 职场文书
投资意向书
2014/07/30 职场文书
中秋节晚会开场白
2015/05/29 职场文书
贷款收入证明范本
2015/06/12 职场文书
2016年寒假见闻
2015/10/10 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS