微信小程序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
                }
            }]
       })
    }
})