Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在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=?&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中使用百度地图——根据输入框输入的内容,获取详细地址的更多相关文章
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- vue中实现百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
- vue 中结合百度地图获取当前城市
首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...
- vue中使用百度地图vue-baidu-map
安装 npm install vue-baidu-map --save 全局注册 全局注册将一次性引入百度地图组件库的所有组件.需在入口文件main.js中引入vue-baidu-map import ...
- vue中使用百度地图,悬浮窗搜索功能
https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...
- VUE 中引入百度地图(vue-Baidu-Map)
1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...
- vue 中引用 百度地图
1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...
随机推荐
- Put queue for MemoryTransaction of capacity 10000 full, consider committing more frequently, increasing capacity or increasing thread count flume capacity 时间数
package com.test; import org.apache.http.*;import org.apache.http.entity.ContentType;import org.apac ...
- 具备双向通行能力的架构对于移动APP属于刚性需求。 WebSocket连接 注册信令
双向通信使用指南_用户指南(开放 API)_API 网关-阿里云 https://help.aliyun.com/document_detail/66031.html 流程描述 (1) 客户端在启动的 ...
- 网络爬虫值scrapy框架基础
简介 Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. 其可以应用在数据挖掘,信息处理或存储历史 ...
- Python多线程、多进程和协程的实例讲解
线程.进程和协程是什么 线程.进程和协程的详细概念解释和原理剖析不是本文的重点,本文重点讲述在Python中怎样实际使用这三种东西 参考: 进程.线程.协程之概念理解 进程(Process)是计算机中 ...
- Mysql中字段类型之时间戳大坑
一 .环境说明: 在目前项目中,有这样的一张表,用来记录会议的相关信息,例如:会议的内容.会议的参会人员.会议的地点.会议的状态(会议是否已结束.会议是否被撤销).会议的开始时间以及该条信息 ...
- SpringBoot-模板渲染
模板 开发Web站点的本质,其实就是根据浏览器发起的请求(输入),生成HTML代码返回给浏览器(输出).在之前的学习中,我们已经通过文件的形式存储起来而不是直接在Java代码中生成HTML代码.另一方 ...
- docker-compose部署zk集群、kafka集群以及kafka-manager,及其遇到的问题和解决
zk集群docker-compose.yml 1.新建网络 docker network create --driver bridge --subnet --gateway 172.23.0.1 zo ...
- Swift学习——A Swift Tour 枚举和结构体
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhenyu5211314/article/details/28588095 Enumerations ...
- PHP归档phar性能測试
PHP自从5.3后新增PHAR归档,Phar 归档的概念来自 Java™ 技术的 JAR 归档,它同意使用单个文件打包应用程序.这个文件里包括运行应用程序所需的全部东西.该文件不同于单个可运行文件,后 ...
- 以EJB谈J2EE规范
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiaoduishenghuogo/article/details/24800703 接触J2EE的时 ...