小程序模板网

微信小程序之callout自定义气泡

发布时间:2018-09-17 09:11 所属栏目:小程序开发教程
最近闲着踩踩地图的坑

一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了 微信小程序里面地图 callout 这个属性
callout呢,是在标记的点上面显示 一个 气泡,作为提示用
最后展示下 效果  可以展示 顶部气泡以及监听被点击
 
废话不多说,直接上代码


wxml
[AppleScript] 纯文本查看 复制代码
?

<map id="map"  scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap"
latitude="{{latitude}}" bindcallouttap = "bindcallouttap"
longitude ="{{longitude}}"
controls="{{controls}}" show-location bindregionchange="regionchange" style="width: 100%; height: {{view.Height}}px;"></map>


js
[AppleScript] 纯文本查看 复制代码
?
 
 
 
var app = getApp();

Page({
  data: {
    url: '',[color=#0800][backcolor=rgb(255, 255, 254)][font=Consolas]//测试的时候把下面listData换成身边的点就行[/font][/backcolor][/color]
    listData: [{
      "id": 1,
      "placeName": "测试地址1",
      "placeImageUrl": "",
      "placeOpenTime": 1506200400,
      "placeCloseTime": 1506265200,
      "placeAddress": "测试地址1啊",
      "placeLongitude": "114.08190678985596",
      "placeLatitude": "22.544808209639864"
    }, {
      "id": 2,
      "placeName": "测试地址2",
      "placeImageUrl": "",
      "placeOpenTime": 1506200400,
      "placeCloseTime": 1506265200,
      "placeAddress": "测试地址2啊",
      "placeLongitude": "114.0938372555542",
      "placeLatitude": "22.53953655390022"
    }, {
      "id": 3,
      "placeName": "测试地址3",
      "placeImageUrl": "",
      "placeOpenTime": 1506243600,
      "placeCloseTime": 1506265200,
      "placeAddress": "测试地址3啊",
      "placeLongitude": "114.05454",
      "placeLatitude": "22.52291"
    }],
    scale: '15',
    Height: '0',
    controls: '40',
    latitude: '',
    longitude: '',
    markers: [],
  },
  onReady: function(e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')
  },
  onLoad: function() {
    var that = this;
    that.setData({
      url: app.globalData.url
    })

    // var data = JSON.stringify({
    //   page: 1,
    //   pageSize: 10,
    //   request: {
    //     placeLongitude: app.globalData.longitude,
    //     placeLatitude: app.globalData.latitude,
    //     userId: app.globalData.userId
    //   }
    // })

    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: (res) => {
        console.log(res);
        that.setData({
          markers: that.getSchoolMarkers(),
          scale: 12,
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    });

    wx.getSystemInfo({
      success: function(res) {
        //设置map高度,根据当前设备宽高满屏显示
        that.setData({
          view: {
            Height: res.windowHeight
          }
        })
      }
    })
  },
  bindcallouttap: function(e) {
    console.log("头上文字被点击", e)
  },
  markertap: function(e) {
    console.log("定位的点被点击", e)
  },
  controltap: function(e) {
    console.log("111")
    this.moveToLocation()
  },
  getSchoolMarkers() {

    var market = [];

    for (let item of this.data.listData) {

      let marker1 = this.createMarker(item);

      market.push(marker1)
    }
    console.log("market===========", market)
    return market;
  },
  moveToLocation: function() {
    this.mapCtx.moveToLocation()
  },
  strSub: function(a) {
    var str = a.split(".")[1];
    str = str.substring(0, str.length - 1)
    return a.split(".")[0] + '.' + str;
  },
  createMarker(point) {

    let latitude = this.strSub(point.placeLatitude);
    let longitude = point.placeLongitude;
    let marker = {
      iconPath: "../images/here.png",
      id: point.id || 0,
      name: point.placeName || '',
      title: point.placeName || '',
      latitude: latitude,
      longitude: longitude,
      label: {
        x: -24,
        y: -26,
        content: point.placeName
      },
      width: 50,
      height: 50,
      callout: {
        content: point.placeName || '',
        fontSize: 14,
        bgColor: "#FFF",
        borderWidth: 1,
        borderColor: "#CCC",
        padding: 4,
        display: "ALWAYS",
        textAlign: "center"
      }
    };
    return marker;
  }
})


wxss
[AppleScript] 纯文本查看 复制代码
?
1
2
3
4
5
6
7
8
9
.map_container{
    height: 300px;
    width: 100%;
}
 
.map {
    height: 100%;
    width: 100%;
}
 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24812.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询