码迷,mamicode.com
首页 > 微信 > 详细

小程序map地图上显示多个marker

时间:2019-09-24 08:23:48      阅读:536      评论:0      收藏:0      [点我收藏+]

标签:sys   success   sele   tail   this   navig   UNC   navigate   function   

 

wxml

 

<map 
id="myMap" 
style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}" 
longitude="{{longitude}}" 
markers="{{markers}}" 
show-location 
bindmarkertap="selectMarket" 
include-points="{{markers}}" 
bindmarkertap="toaddress"
>
</map>


js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
 
    latitude: 24.4795100000,
    longitude: 118.0894800000,
    markers: [
      {
        id: 0,
        latitude: 24.4455700000,
        longitude: 118.0824000000,
        // alpha:0,
        callout:{
          content: " 厦门思明区政府 \n 12000元/㎡",
          padding:10,
          display:‘ALWAYS‘,
          textAlign:‘center‘,
          // borderRadius: 10,
          // borderColor:‘#ff0000‘,
          // borderWidth: 2,
        }
 
      },
      {
        id: 1,
        latitude: 24.5131500000,
        longitude: 118.1468600000,
        callout: {
          content: " 厦门湖里区政府 \n 70000元/㎡",
          padding: 10,
          display: ‘ALWAYS‘,
          textAlign: ‘center‘
        }
        
      },
      {
        id: 2,
        latitude: 24.7235700000,
        longitude: 118.1517300000,
        callout: {
          content: " 厦门市同安区政府 \n 100",
          padding: 10,
          display: ‘ALWAYS‘,
          textAlign: ‘center‘
        }
        
      },
      {
        id: 3,
        latitude: 24.5759000000,
        longitude: 118.0972700000,
        callout: {
          content: " 厦门市集美区政府 \n 100",
          padding: 10,
          display: ‘ALWAYS‘,
          textAlign: ‘center‘
        }
 
      },
      {
        id: 4,
        latitude: 24.4846000000,
        longitude: 118.0329300000,
        callout: {
          content: " 厦门市海沧区政府 \n 100",
          padding: 10,
          display: ‘ALWAYS‘,
          textAlign: ‘center‘
        }
 
      },
      {
        id: 5,
        latitude: 24.6196000000,
        longitude: 118.2478900000,
        callout: {
          content: " 厦门市翔安区政府 \n 100",
          padding: 10,
          display: ‘ALWAYS‘,
          textAlign: ‘center‘
        }
 
      },
    ],
    mapWidth:‘‘,
    mapHeight:‘‘
 
  },
  toaddress:function(e){
    console.log(e)
    var id =e.markerId
    console.log(id)
    // wx.openLocation({
    //   latitude: this.data.markers[id].latitude,
    //   longitude: this.data.markers[id].longitude,
    // })
    wx.navigateTo({
      url: ‘/pages/index/index‘,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var sy = wx.getSystemInfoSync(),
        mapWidth = sy.windowWidth*2,
        mapHeight = sy.windowHeight*2;
    this.setData({
      mapWidth:mapWidth,
      mapHeight:mapHeight
    })
  },
 

 

 

 

 

 

转: https://blog.csdn.net/weixin_42274835/article/details/81707972

小程序map地图上显示多个marker

标签:sys   success   sele   tail   this   navig   UNC   navigate   function   

原文地址:https://www.cnblogs.com/fps2tao/p/11576154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!