小程序模板網(wǎng)

微信小程序之callout自定義氣泡

發(fā)布時(shí)間:2018-09-17 09:11 所屬欄目:小程序開(kāi)發(fā)教程
最近閑著踩踩地圖的坑

一腳下去差點(diǎn)沒(méi)從坑里爬起來(lái),然后由于某個(gè)原因,去研究了 微信小程序里面地圖 callout 這個(gè)屬性
callout呢,是在標(biāo)記的點(diǎn)上面顯示 一個(gè) 氣泡,作為提示用
最后展示下 效果  可以展示 頂部氣泡以及監(jiān)聽(tīng)被點(diǎn)擊
 
廢話不多說(shuō),直接上代碼


wxml
[AppleScript] 純文本查看 復(fù)制代碼
?

<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] 純文本查看 復(fù)制代碼
?
 
 
 
var app = getApp();

Page({
  data: {
    url: '',[color=#0800][backcolor=rgb(255, 255, 254)][font=Consolas]//測(cè)試的時(shí)候把下面listData換成身邊的點(diǎn)就行[/font][/backcolor][/color]
    listData: [{
      "id": 1,
      "placeName": "測(cè)試地址1",
      "placeImageUrl": "",
      "placeOpenTime": 1506200400,
      "placeCloseTime": 1506265200,
      "placeAddress": "測(cè)試地址1啊",
      "placeLongitude": "114.08190678985596",
      "placeLatitude": "22.544808209639864"
    }, {
      "id": 2,
      "placeName": "測(cè)試地址2",
      "placeImageUrl": "",
      "placeOpenTime": 1506200400,
      "placeCloseTime": 1506265200,
      "placeAddress": "測(cè)試地址2啊",
      "placeLongitude": "114.0938372555542",
      "placeLatitude": "22.53953655390022"
    }, {
      "id": 3,
      "placeName": "測(cè)試地址3",
      "placeImageUrl": "",
      "placeOpenTime": 1506243600,
      "placeCloseTime": 1506265200,
      "placeAddress": "測(cè)試地址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的經(jīng)緯度
      success: (res) => {
        console.log(res);
        that.setData({
          markers: that.getSchoolMarkers(),
          scale: 12,
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    });

    wx.getSystemInfo({
      success: function(res) {
        //設(shè)置map高度,根據(jù)當(dāng)前設(shè)備寬高滿屏顯示
        that.setData({
          view: {
            Height: res.windowHeight
          }
        })
      }
    })
  },
  bindcallouttap: function(e) {
    console.log("頭上文字被點(diǎn)擊", e)
  },
  markertap: function(e) {
    console.log("定位的點(diǎn)被點(diǎn)擊", 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] 純文本查看 復(fù)制代碼
?
1
2
3
4
5
6
7
8
9
.map_container{
    height: 300px;
    width: 100%;
}
 
.map {
    height: 100%;
    width: 100%;
}
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24812.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢