小程序地图组件DEMO

最近在做一个地图相关的小程序，已经完工，这里和大家分享下

1、index.wxml

</map>

非常简单的写法，没什么名堂

2、index.wxss

.index-hd {
padding: 5rpx;
text-align: center;
}

样式也很简单

3、index.js

重点和功能在这里边

Page({

   data: {

    latitude: 22.46770600000,//纬度
    longitude: 109.9233160000,//经度
    markers: [//markers参数配置

//项目开始
     {
        //iconPath:"../../resource/images/lgzy.png",
        id: 1,
        latitude: 28.4772780000,//纬度
        longitude:119.9528090000,//经度
        // alpha:0,
        callout:{
          content: "项目名称",
          bgColor:'#FF6600',//背景颜色
          color: '#FFFFFF',//文字颜色
          padding:5,//内容与边框边距
          display:'ALWAYS',
          textAlign:'center',//文本对齐
          borderRadius: 10,//圆角边框
          borderColor:'#FF6600',//边框颜色
          borderWidth: 2,//边框粗细

      },

//项目结束
    ],
    mapWidth:'',
    mapHeight:''
},

//end data
//这个页面分享给其他好友显示的标题和图片
onShareAppMessage: function () {
    return {
      title: '标题',
      imageUrl: '../../resource/images/sharemap.png'
    }
},
//点击markers，通过对应ID传参，执行跳转到目标页面
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',
      url: '../../pages/jump/index?id='+ id,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
},

/**
   * 跳转到目标位置
   */
   /*
getLocation:function(){
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        wx.openLocation({//使用微信内置地图查看位置。
          latitude: 31.0938140000,//要去的纬度-地址
          longitude: 121.5039390000,//要去的经度-地址
          name: "O'MALL华侨城商业中心",
          address: '华侨城商业中心'
        })
      }
    })
},
*/
/**
   * 生命周期函数--监听页面加载
   */
onLoad: function(options) {
    var sy = wx.getSystemInfoSync(),
        mapWidth = sy.windowWidth*2,
        mapHeight = sy.windowHeight*2;
    this.setData({
      mapWidth:mapWidth,
      mapHeight:mapHeight
    })
       // text:"这是一个页面"
    imageSrc: '../../resource/images/default.jpg'
},

jumptoindex:function(){
    wx.navigateTo({
      url: '../../pages/index/index',
    })
}//jumptoindex

})//page

4、效果图

小程序地图组件DEMO

5、参数说明

地图组件参数

参数名	参数类型	描述
longitude	Number	中心经度
latitude	Number	中心纬度
scale	Number	缩放级别，取值范围 5-18（默认16 number）
markers	Array	标记点
polyline	Array	路线
circle	Array	圆
controls	Array	控件
include-points	Array	缩放视野以及所有给定的坐标点
circle	Boolean	圆
show-location	EventHandle	显示带有方向的当前定位点
bindmarkertap	EventHandle	点击标记点时触发
bindcontroltap	EventHandle	点击控件时触发
bindregionchange	EventHandle	视野发生变化时触发
bindtap	EventHandle	点击地图时触发

markers参数

参数名	参数类型	必传	描述
id	Number	N	标记点id（marker事件回调会返回此id）
longitude	Number	Y	中心经度（浮点数，范围：-180~180）
latitude	Number	Y	中心纬度（浮点数，范围：-90~90）
title	String	N	标注点名
iconPath	String	Y	显示的图标（项目目录下的图片路径，支持相对路径写法，以‘/’开头，则表示相对小程序的根目录，也支持临时路径）
rotate	Number	N	旋转角度（顺时针旋转的角度，范围：0~360，默认0）
alpha	Number	N	标注的透明度（默认1，无透明）
width	Number	N	标注图标宽度（默认图标实际宽度）
height	Number	N	标注图标高度（默认图标实际高度）
callout	Object	N	自定义标注点上方的气泡窗口 ({content，color，fontSize，borderRadius，bgColor，padding，boxShadow，display})
label	Object	N	为标记点旁边增加标签（{color，font Size，content，x，y}，可识别换行符，x，y原点是marker对应的经纬度）

小程序地图组件DEMO

相关推荐