码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中使用百度地图——根据输入框输入的内容,获取详细地址

时间:2018-01-03 21:03:38      阅读:2244      评论:0      收藏:0      [点我收藏+]

标签:使用   data   oom   width   经纬度坐标   input框   app   clear   arch   

知识点在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度

参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn.net/docallen/article/details/70877925

                   详细功能修改参考博客: https://www.cnblogs.com/NearTheSea/p/6808093.html

 

效果图:在input输入框中,输入要查询的地址,搜索出相关的名字

技术分享图片

技术分享图片

 

 

选中详细地址,地图定位到详细地址

技术分享图片

 

 1.申请密钥:

百度地图使用一个专门的密钥(ak)作为路径

在vue框架,的index.html中引入

<body>
<div id="app"></div>
<!--引入百度地图API-->
<script src=‘http://api.map.baidu.com/api?v=2.0&ak=GS4vwHtWDQ8l6SpHPW1Qys0E5RV4U2bb&callback=init‘></script>
</body>

2.map.js实例:

<template>
<div id="all">
<input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
<div id="allmap"></div>
</div>
</template>
<script>
//import {MP} from ‘../../map‘
export default {
data(){
return {
address_detail: null, //详细地址
userlocation: {lng: "", lat: ""},
}
},
mounted(){
this.$nextTick(function () {

var th = this
// 创建Map实例
var map = new BMap.Map("allmap");
// 初始化地图,设置中心点坐标,
var point = new BMap.Point(121.160724,31.173277); // 创建点坐标,汉得公司的经纬度坐标
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId"
, "location": map
})
var myValue
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
this.address_detail = myValue
setPlace();
});

function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(th.userlocation, 18);
map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
}

var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);

//测试输出坐标(指的是输入框最后确定地点的经纬度)
map.addEventListener("click",function(e){
//经度
console.log(th.userlocation.lng);
//维度
console.log(th.userlocation.lat);

})
}

})
},
}
</script>
<style scoped>
#allmap{
width: 400px;
height: 400px;
font-family: "微软雅黑";
border:1px solid green;
}
</style>



Vue中使用百度地图——根据输入框输入的内容,获取详细地址

标签:使用   data   oom   width   经纬度坐标   input框   app   clear   arch   

原文地址:https://www.cnblogs.com/shuaifing/p/8185311.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!