基于百度地图web版开发仿支付宝与微信的发送位置功能页面
5066阅读
0评论
0点赞
最近应用需要一个类似于微信支付那样的发送位置的一个功能，网上没有找到现成的，于是自己就动手写了一个初稿版，主要记录下开发原理，有要用的同学们自己参考优化下。
代码如下：
发送位置
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;
}
返回
发送
{{ vo.title }}
{{ vo.address }}
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();
希望能帮助到大家~
评论（0）
暂无评论
