[小程序]微信小程序获取位置展示地图并标注信息

前端之家收集整理的这篇文章主要介绍了[小程序]微信小程序获取位置展示地图并标注信息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式
2.获取位置要在app.json中标明权限
3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点

index.js

//@H_301_9@index.js@H_301_9@
//@H_301_9@获取应用实例@H_301_9@
const app = getApp()

Page({
  data: {
  },onLoad: @H_301_9@function@H_301_9@ () {
    @H_301_9@var@H_301_9@ self=this@H_301_9@;
    @H_301_9@this@H_301_9@.mapCtx = wx.createMapContext('myMap');
    wx.getLocation({
      type: @H_301_9@'gcj02',success(res) {
        self.setData({
          latitude : res.latitude,longitude : res.longitude,markers: [{
            id: @H_301_9@1301_9@'/image/location.png'301_9@"服务:青少年英语培训\r\n姓名:陶士涵\r\n电话:18808987876"301_9@"#fff"301_9@"5px"301_9@"2px"301_9@"1px"301_9@"#07c160"301_9@2301_9@+0.01301_9@"服务:出租龙兴园西区9号楼二单元501\r\n姓名:陶士涵\r\n电话:18808987876"301_9@"#fff"301_9@"5px"301_9@"2px"301_9@"1px"301_9@"#07c160"301_9@

index.wxml

<!--@H_301_9@index.wxml@H_301_9@-->@H_301_9@
    <@H_301_9@map
      @H_301_9@id@H_301_9@="myMap"@H_301_9@
      style@H_301_9@="width: 100%; height:100vh;"@H_301_9@
      latitude@H_301_9@="{{latitude}}"@H_301_9@
      longitude@H_301_9@="{{longitude}}"@H_301_9@
      markers@H_301_9@="{{markers}}"@H_301_9@
      covers@H_301_9@="{{covers}}"@H_301_9@
      show-location
    @H_301_9@></@H_301_9@map@H_301_9@>@H_301_9@

app.json

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

 

猜你在找的微信小程序相关文章