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

自定义弹框形式

wxjs

//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',
            customCallout:{
              display:'BYCLICK'
            }
          },
            {
              id: 2,
              latitude: res.latitude,
              longitude: res.longitude+0.01,
              iconPath: '/image/location.png',
              customCallout:{
                display:'BYCLICK'
              }
            }
          ],
        });
      }
    })
  },
})

wxss

.view-map{
  padding:30rpx;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: 0 0 8rpx #ddd;
  width: 470rpx;
}
.view-map-ti{
  font-size:32rpx;
  line-height: 32rpx;
}
.view-map-address{
  font-size: 20rpx;
  line-height: 24rpx;
  padding:8rpx 0; 
  color:#666;
}
.view-map-tel{
  font-size: 24rpx;
  line-height: 30rpx;
  color:#00aff8;
}

wxml

<map
            id="myMap"
            style="width: 100%; height:100vh;"
            latitude="{{latitude}}"
            longitude="{{longitude}}"
            markers="{{markers}}"
            covers="{{covers}}"
            show-location
          >
          <cover-view slot="callout">
            <cover-view marker-id="1">
              <cover-view class="view-map">
                  <cover-view class="view-map-ti">大拇指家电维修</cover-view>
                  <cover-view class="view-map-address">北京市朝阳区利泽中二路二区203号洛娃大厦A座5层</cover-view>
                  <cover-view class="view-map-tel" bindtap='freeTell'>电话联系</cover-view>
              </cover-view>
            </cover-view>
            <cover-view marker-id="2">
                <cover-view class="view-map">
                  <cover-view class="view-map-ti">修无忧空调维修</cover-view>
                  <cover-view class="view-map-address">山东省临沂市兰山区开元商城B座</cover-view>
                  <cover-view class="view-map-tel" bindtap='freeTell'>电话联系</cover-view>
              </cover-view>
            </cover-view>
          </map>

wxjs

//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",
               
              }
            }
          ],
        });
      }
    })
  },
})

wxml

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

wxss

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