欢迎光临
我们一直在努力

基于百度地图web版开发仿支付宝与微信的发送位置功能页面

最近应用需要一个类似于微信支付那样的发送位置的一个功能,网上没有找到现成的,于是自己就动手写了一个初稿版,主要记录下开发原理,有要用的同学们自己参考优化下。

代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>发送位置</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8d867483baeaffd7f85b1ee099aee919"></script>

	<style>
		html,body,ul,li,p{ padding: 0;margin: 0; }

		#header{ position: fixed;top:0;background: #fff; clear: both; width: 100%;height: 40px; line-height: 40px;font-size: 14px; color: #0d95e8; }
		#header .f_left{ float: left; padding: 0 20px; color: #666;  }
		#header .f_right{ float: right;padding: 0 20px; }

		.u-icon-arr {
			display: inline-block;
			width: 6px;
			height: 6px;
			border-style: solid;
			border-width: 2px 2px 0 0;
			border-color: #0d95e8;
			-webkit-transform-origin: 75% 25%;
			-webkit-transform: rotateZ(45deg);
			-webkit-transition: 100ms ease-in .1s;
			transition: 100ms ease-in .1s;
			margin-right: 10px;
		}
		.u-icon-arrD{
			-webkit-transform: rotateZ(225deg);
		}

		.u-icon-arr-ok{
			display: none;
			position: absolute;
			right: 10px;
			top:30px;
			width: 10px;
			border-color: #0d95e8;
			-webkit-transform: rotateZ(125deg);
		}

		.u-icon-pointB
		{
			display: block;
			width: 10px;
			height: 10px;
			padding: 4px;
			border-radius: 100%;/*圆角为100%就实现圆的效果*/
			box-shadow: 0 0 0 1px #6bb5ff;
		}

		/*蓝色点icon*/
		.cur.u-icon-pointB
		{
			/*如果背景和boder颜色不一致  则为空心圆*/
			background-color: #6bb5ff;
			padding: 0;
		}


		#boxmap{ flex:1; margin-top: 40px; width: 100%;height: 500px;max-height: 100%; }
		#boxlist{ position: fixed;bottom: 0; width: 100%;height: 30%; background: #ffffff; overflow-y: auto; }

		#boxlist ul{ list-style: none;  }
		#boxlist li{ position: relative; }
		#boxlist ul li.on{ background: #ffffff; }
		.mui-media-body {line-height: 1.6875rem;border-bottom: solid 1px #cacaca;padding: .5rem 0 .5rem .875rem; padding-right: 40px;}
		.mui-media-body span { font-size: 18px; color: #333;font-size: 1rem;}
		.mui-media-body .mui-ellipsis{ font-size: 12px;color: #999; line-height: 20px;   }

		li.on .mui-media-body span,
		li.on .mui-media-body .mui-ellipsis{ color: #0d95e8; }
		li.on .mui-media-body span.u-icon-arr-ok{ display: block; }

		#dingwei{
			position: fixed;
			bottom: 31%;
			padding: 5px 10px;
			font-size: 12px;
			border: 1px solid #efefef;
			background: #FFF;
		}
		#dingwei:active{
			background:#eee;
		}


	</style>
</head>
<body>


<div id="boxmap"></div>

<div id="app">
	<div id="header">
		<div class="f_left" @click="back()"><span class=" u-icon-arr u-icon-arrD"></span>返回</div>
		<div class="f_right" @click="send()">发送</div>
	</div>
	<div id="dingwei" @click="dingwei()" title="定位"><span class="u-icon-pointB"><span class="u-icon-pointB cur"></span></span></div>
	<div id="boxlist">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="(vo,index) in list" :class="vo.on==true?'on':''" @click="clickli(index)">

				<div class="mui-media-body">
					<span>{{ vo.title }}</span>
					<p class="mui-ellipsis">{{ vo.address }}</p>
					<span class="u-icon-arr u-icon-arr-ok"></span>
				</div>

			</li>
		</ul>
	</div>

</div>

</body>

<script type="text/javascript">

	var map,geoc;
	var myMap = {
	    app:{},
        lng:106.5335,
        lat:29.585581,
        level:16,
		point:{},
        vectorData:{ fc:'', marker:'' },
        init:function(){

            // 百度地图API功能
            map = new BMap.Map("boxmap");
            this.point = new BMap.Point(this.lng, this.lat);
            map.centerAndZoom(this.point, this.level);
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

            geoc = new BMap.Geocoder();

            // map.addEventListener("click", showInfo);
            map.addEventListener("moveend",this.moveInfo);

            myMap.initVue();
            myMap.addFc(this.point.lng,this.point.lat);
            myMap.addMarker(this.point.lng,this.point.lat);
            myMap.getCityInfo(this.point.lng,this.point.lat);

        },
		initVue:function(){
            myMap.app = new Vue({
                el:'#app',
                data:{
                    list:[]
                },
                methods:{
                    clickli(index){
                        myMap.confirmAddress(index)
                    },
                    dingwei(){
                        console.log('定位');
						myMap.getLocation(function(lng,lat){
                            map.panTo(new BMap.Point(lng, lat));
						});

                    },
                    send(){
                        alert('发送');
                        //这个逻辑根据自己的业务需求写

                    },
                    back(){
                        alert('返回');
                        //一般执行关闭与返回之类操作
                    }
                },
				beforeUpdate(){
                    console.log(this.list);
				}
            });
		},
	    getLocation:function(callback){
            //定位需要根据 app等 不同方法 获取到的坐标进行传值
			//如何获取定位信息需要自己写
            // myMap.lng = lng;
            // myMap.lat =lat;
            callback(this.lng,this.lat);
		},
		getCityInfo:function(){

            geoc.getLocation(this.point, function(rs){

                var addComp = rs.addressComponents;
                var currentAddress = [{ title:'当前位置',address:rs.address, business:rs.business,point:rs.point,on:true }];
                if(rs.surroundingPois){
                    for (var i=0;i<rs.surroundingPois.length;i++){
                        var v = rs.surroundingPois[i];
                        currentAddress.push({ title:v.title,address:v.address, business:v.si,point:v.point,on:false });
                    }
                }

                console.log(currentAddress);

                myMap.setList(currentAddress);
            });
		},
		addFc:function(lng,lat){
            var vectorFCArrow = new BMap.Marker(new BMap.Point(lng-0.0003, lat), {
                // 初始化方向向上的闭合箭头
                icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
                    scale: 1,
                    strokeWeight: 1,
                    rotation: 0,//顺时针旋转30度
                    fillColor: '#0d95e8',
                    fillOpacity: 1
                })
            });
            map.addOverlay(vectorFCArrow);
            this.vectorData.fc = vectorFCArrow;
		},
		addMarker:function(lng,lat){
            // map.clearOverlays();
			map.removeOverlay(this.vectorData.marker);
            myMap.point = new BMap.Point(lng, lat);
            // //设置marker图标为水滴
            // var vectorMarker = new BMap.Marker(this.point, {
            //     // 指定Marker的icon属性为Symbol
            //     icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
            //         scale: 1,//图标缩放大小
            //         fillColor: "#0d95e8",//填充颜色
            //         fillOpacity: 0.8,//填充透明度
            //     })
            // });
            // map.addOverlay(vectorMarker);

            var vectorMarker = new BMap.Marker(myMap.point);  // 创建标注
            map.addOverlay(vectorMarker);               // 将标注添加到地图中
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            this.vectorData.marker = vectorMarker;


		},
		moveInfo:function(){
            var center = map.getCenter();
            myMap.addMarker(center.lng,center.lat);
            myMap.getCityInfo(center.lng,center.lat);
		},
		clickInfo:function(e){
            map.clearOverlays();
            addMarker(e.point.lng,e.point.lat);
		},
		setList:function (data) {

            myMap.app.list = [];
            for (var i=0;i<data.length;i++){
            	myMap.app.list.push(data[i]);
			}
            document.getElementById('boxlist').scrollTo(0,0);
        },
        confirmAddress:function(index){

            for (var i=0;i<myMap.app.list.length;i++){
                if(i == index){
                    myMap.app.list[i].on = true;
                    myMap.point = myMap.app.list[i].point;
				}else{
                    myMap.app.list[i].on = false;
				}
			}

            myMap.addMarker(myMap.point.lng,myMap.point.lat);


		}

	}



    myMap.init();

</script>

<html>

希望能帮助到大家~

未经允许不得转载:mbku » 基于百度地图web版开发仿支付宝与微信的发送位置功能页面

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

翰林黄金-重庆运营中心

翰林黄金翰林金业