Use of wechat applet map

Simple use of applet map Components

---

One 、wxml

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

Two 、wxss

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

3、 ... and 、JS

Page({
    
    data: {
    
        longitude:"",   //  Center longitude 
        latitude:"",    //  Center latitude 
        markers:[],     //  Marker points 
        scale:10        //  Zoom level , The value range is 3-20
    },

    onLoad: function (options) {
    
        //  Get current geographic location 
        wx.getLocation({
    
            success:(res)=>{
    
                let {
    latitude,longitude} = res;
                this.setData({
    
                    latitude,
                    longitude
                })
            }
        })
    },

    //  Customize markers
    getMarkers(){
    
        //  Suppose the request data returns  markers
        // ......
        this.setData({
    
            markers:[{
    
                joinCluster:true,   //  Point aggregation or not 
                iconPath:"/images/login.png",  //  The image path in the project directory 
                longitude:“131.29”, //  longitude 
                latitude:“78.21”,  //  latitude 
                width:30,  //  Label the width of the icon 
                height:30, //  Mark the height of the icon 
                callout:{
      //  The bubble window above the marker point 
                    content:" Text ",  //  Text 
                    color:"red",    //  text color 
                    fontSize:24,    //  Text size 
                    borderRadius:10, //  Border fillet 
                    bgColor:"bule", //  Background color 
                    padding:10,    //  Leave text margins blank 
                    display:"ALWAYS", // 'BYCLICK': Click to display ; 'ALWAYS': Chang Xian 
                    textAlign:"center"// text alignment . Valid values : left, right, center
                }
            }]
       })
    }
})