2019-07-24
基于上一个文章发布一下调用百度地图搜索拿去当前的地理位置，页面有element-ui,记得去main.js配置element-ui，此处忽略
效果图：
拿去百度的接口获取需要的经纬度
<template>
<div id="app">
<div style="height:8%">
<el-row style="padding-top:10px;">
<el-col :offset="2" :span="15">
<el-input :id="suggestId" v-model="address_detail" :clearable='clearable' placeholder="请输入店铺地址,获取店铺坐标" >
</el-input>
</el-col>
<el-col :span="2" style="margin-left:10px">
<el-button id="position" @click="search" type="primary">定位</el-button>
</el-col>
</el-row>
</div>
<div id="map_canvas" class="allmap"></div>
</div>
</template>
<script>
export default {
data() {
return {
address_detail: "", //详细地址
userlocation: { lng: "", lat: "" },
clearable: true,
suggestId: "suggestId",
map : {},
mk: {}
};
},
created () {
},
methods: {
drawMap() {
this.map = new BMap.Map("map_canvas"); // 创建地图实例
this.map.addControl(new BMap.NavigationControl()); // 启用放大缩小 尺
this.map.enableScrollWheelZoom();
this.getlocation();//获取当前坐标, 测试时获取定位不准。
var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标
this.map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别
var marker = new BMap.Marker(point); // 创建标注
this.map.addOverlay(marker); // 将标注添加到地图中
var ac = new BMap.Autocomplete({
//建立一个自动完成的对象
input: "suggestId",
location: this.map
});
var myValue;
ac.addEventListener("onconfirm", (e)=> {
//鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue =_value.province +_value.city +_value.district +_value.street +_value.business;
this.address_detail = myValue;
this.setPlace();
});
},
getMarker (point) {
this.mk = new BMap.Marker(point);
this.mk.addEventListener("dragend", this.showInfo);
this.mk.enableDragging(); //可拖拽
this.getAddress(point);
this.map.addOverlay(this.mk);//把点添加到地图上
this.map.panTo(point);
},
getlocation () {
//获取当前位置
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition((r) =>{
if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){
this.getMarker(r.point);
this.userlocation = r.point;
}else {
alert('failed'+this.getStatus());
}
});
},
//绑定Marker的拖拽事件
showInfo(e){
var gc = new BMap.Geocoder();
gc.getLocation(e.point, (rs)=>{
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
//画图 ---》显示地址信息
var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
this.map.removeOverlay(this.mk.getLabel());//删除之前的label
this.mk.setLabel(label);
this.address_detail = address;
this.userlocation = e.point;
});
},
//获取地址信息，设置地址label
getAddress(point){
var gc = new BMap.Geocoder();
gc.getLocation(point, (rs)=>{
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
//画图 ---》显示地址信息
var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
this.map.removeOverlay(this.mk.getLabel());//删除之前的label
this.address_detail = address;
this.mk.setLabel(label);
});
},
setPlace() {
this.map.clearOverlays(); //清除地图上所有覆盖物
var th = this
function myFun() {
th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
th.map.centerAndZoom(th.userlocation, 18);
th.getMarker(th.userlocation);
}
var local = new BMap.LocalSearch(this.map, {
onSearchComplete: myFun //智能搜索
});
local.search(this.address_detail);
},
search () {
var localSearch = new BMap.LocalSearch(this.map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
this.searchByInputName(localSearch);
console.log(this.userlocation)
this.$router.push({path:'/purchase',query:{pointX:this.userlocation.lng,pointY:this.userlocation.lat}}) // 通过点击获取当前的坐标，跳入页面purchase并把当前的经纬传递给他·
},
searchByInputName(localSearch) {
this.map.clearOverlays(); //清空原来的标注
var th = this;
var keyword = this.address_detail;
localSearch.setSearchCompleteCallback(function(searchResult) {
var poi = searchResult.getPoi(0);
th.userlocation = poi.point;
th.map.centerAndZoom(poi.point, 13);
th.getMarker(th.userlocation);
});
localSearch.search(keyword);
},
onCopy () {
this.$message('内容已复制到剪贴板!');
},
onError () {
this.$message('内容复制失败,请重试!');
}
},
mounted() {
this.$nextTick(function() {
this.drawMap();
});
}
};
</script>
<style scoped>
.allmap {
width: 100%;
height: 400px;
font-family: "微软雅黑";
border: 1px solid green;
}
.el-tag {
cursor: pointer;
}
#map_canvas{
width: 99%;
margin: 0px auto;
margin-top: 10px;
height: 90%;
}
</style>
拿到经纬度后，并且转换为当前地址的页面，这里面再次调用了百度的转换
data(){
return{
pointX: this.$route.query.pointX || "", // 经度
pointY: this.$route.query.pointY || "", // 纬度
city: "正在获取当前位置",
}}
getaddress(){
if (this.pointX != "" && this.pointY != "") { //判断拿去到的经纬度不为空的话，跳进方法
var point = new BMap.Point(this.pointX, this.pointY); //利用经纬度再次转换，获取当前的地理位置信息
var geoc = new BMap.Geocoder();
geoc.getLocation(point, rs => {
// console.log(this);
var addComp = rs.addressComponents;
this.city =
addComp.province + "-" + addComp.city + "-" + addComp.district;
console.log(this.city);
console.log(
addComp.province +
", " +
addComp.city +
", " +
addComp.district +
", " +
addComp.street +
", " +
addComp.streetNumber
);
});
return false
}
}
