微信小程序map的使用

小程序简单使用map组件

---

一、wxml

<view class="map">
<map    
  id="map" 
  style="width: 100%;height: 100%;"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  markers="{{markers}}"
  scale="{{scale}}"
  show-location
></map>
</view>

二、wxss

.map{
    width: 100vw;
    height: 100vh;
}

三、JS

Page({
    data: {
        longitude:"",   // 中心经度
        latitude:"",    // 中心纬度
        markers:[],     // 标记点
        scale:10        // 缩放级别，取值范围为3-20
    },

    onLoad: function (options) {
        // 获取当前地理位置
        wx.getLocation({
            success:(res)=>{
                let {latitude,longitude} = res;
                this.setData({
                    latitude,
                    longitude
                })
            }
        })
    },

    // 自定义markers
    getMarkers(){
        // 假设请求数据返回 markers
        // ......
        this.setData({
            markers:[{
                joinCluster:true,   // 是否点聚合
                iconPath:"/images/login.png",  // 项目目录下的图片路径
                longitude:“131.29”, // 经度
                latitude:“78.21”,  // 纬度
                width:30,  // 标注图标宽度
                height:30, // 标注图标高度
                callout:{  // 标记点上方的气泡窗口
                    content:"文本",  // 文本
                    color:"red",    // 文本颜色
                    fontSize:24,    // 文本大小
                    borderRadius:10, // 边框圆角
                    bgColor:"bule", // 背景色
                    padding:10,    // 文本边缘留白
                    display:"ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
                    textAlign:"center"//文本对齐方式。有效值: left, right, center
                }
            }]
       })
    }
})