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


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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
记录一次websocket封装的过程
Nov 23 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php 获取全局变量的代码
2011/04/21 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
python+pyqt实现右下角弹出框
2017/10/26 Python
PyQt5实现拖放功能
2018/04/25 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
自我鉴定四大框架
2014/01/17 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
保护环境建议书300字
2014/05/13 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python3接口性能测试实例代码
2021/06/20 Python