微信小程序如何获取位置展示地图并标注信息-创新互联

小编给大家分享一下微信小程序如何获取位置展示地图并标注信息，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

app.json

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

看完了这篇文章，相信你对“微信小程序如何获取位置展示地图并标注信息”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。