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;
}

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值