html，css，cs，移动端，微信小程序，地图，定位（多个标记点）

微信小程序地图定位

效果图

 

js代码

    data: {
        markers:[
            {
                id : 1001,
                longitude : 113.023657,
                latitude : 34.765241,
                title :'建业百城天地',
                iconPath : '/images/navi.png',
                width:30,
                height:30,
                rotate:90,
                alpha:0.5

            },
            {
                id : 1002,
                longitude : 113.03182,
                latitude : 34.759207,
                title :'28号宿舍楼5楼527室',
                iconPath : '/images/navi.png',
                width:30,
                height:30,
                alpha:0.8
            }
        ],
        //在地图中进行标线
        polyline : [{
            //线上的点
            points : [
                {
                    longitude : 113.031542,
                    latitude : 34.758987,
                },{
                    longitude : 113.029319,
                    latitude : 34.758934,
                }
                ,{
                    longitude : 113.029343,
                    latitude : 34.758662,
                },{
                    longitude : 113.029343,
                    latitude : 34.758662,
                },
                {
                    longitude : 113.025289,
                    latitude : 34.758604,
                },
                {
                    longitude : 113.025187,
                    latitude : 34.765259,
                },
                {
                    longitude : 113.023657,
                    latitude : 34.765241,
                }
            ],
            color:'#FA6400',
            width:5,
        }],
        //在地图中画圆
        circles:[
            //以建业百城天地为圆心 半径为100 画圆
            {
                longitude : 113.023657,
                latitude : 34.765241,
                radius:100, // 半径
                strokeWidth:3, //线的描边宽度
                color:"#ffac12" //线的颜色
            },
            //以28号宿舍楼5楼527室为圆心 半径为100 画圆
            {
                longitude : 113.03182,
                latitude : 34.759207,
                radius : 80, // 半径
                strokeWidth : 1, //线的描边宽度
                color:"#2fac12" //线的颜色
            }
        ]

        
    },
    //标点的点击事件
    markerTap:function(){
        //点击后弹出定位信息
        wx.openLocation({
            longitude : 113.023657,
            latitude : 34.765241,
            name:"建业百城天地",
            address:"河南省郑州市巩义市伏羲路南50米建业百城天地"
        })
        
    }

html代码

<map bindmarkertap="markerTap"  markers="{{markers}}" scale="16" 
longitude="113.02837371826173" latitude="34.76071501773226"></map>

css代码

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