欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序獲取位置展示地圖并標(biāo)注信息的實例代碼

 更新時間：2019年09月01日 09:07:40   作者：陶士涵的菜地  
這篇文章主要介紹了微信小程序獲取位置展示地圖并標(biāo)注信息的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下

1.map組件的高度如果想要鋪滿屏幕，要是使用height:100vh樣式

2.獲取位置要在app.json中標(biāo)明權(quán)限

3.先使用wx.getLocation獲取自己的位置，然后再回調(diào)中使用setData方法，賦予數(shù)據(jù)給前臺頁面展示標(biāo)注點

index.js

//index.js
//獲取應(yīng)用實例
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:"服務(wù):青少年英語培訓(xùn)\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: "服務(wù):出租龍興園西區(qū)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": "找服務(wù)",
  "navigationBarTextStyle": "black"
 },
 "sitemapLocation": "sitemap.json",
 "permission": {
  "scope.userLocation": {
   "desc": "你的位置信息將用于獲取周邊服務(wù)" 
  }
 }
}

總結(jié)

以上所述是小編給大家介紹的微信小程序獲取位置展示地圖并標(biāo)注信息的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

相關(guān)文章

  • js實現(xiàn)表單多按鈕提交action的處理方法

    js實現(xiàn)表單多按鈕提交action的處理方法

    這篇文章主要介紹了js實現(xiàn)表單多按鈕提交action的處理方法，需要的朋友可以參考下
    2015-10-10
  • js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法

    js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法

    這篇文章主要介紹了js實現(xiàn)頭像圖片切割縮放及無刷新上傳圖片的方法,涉及javascript結(jié)合php實現(xiàn)文件無刷新上傳等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07

    • 最新評論