小罗同学最近应用需要一个类似于微信支付那样的发送位置的一个功能，网上没有找到现成的，于是自己就动手写了一个初稿版，主要记录下开发原理，有要用的同学们自己参考优化下。
代码如下：
<!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>希望能帮助到大家~
未经允许不得转载：小罗同学 » 基于百度地图web版开发仿支付宝与微信的发送位置功能页面