Vue Baidu Map局部注册实现和地图绘点
需求:在vue项目中,实现用户选择地图绘点或者通过搜索关键字选点
<template>
<div id="home">
<h2>首页地图</h2>
<div>
<input type="text" v-model="city" class="city">
<input type="button" v-model="cityBtn" class="cityBtn" value="选定" @click="mapBtn">
</div>
<div id="allmap">
<baidu-map v-bind:style="mapStyle" class="bm-view" ak="GPO8jLk2SoDXF5nnaOdDudHxIsMVEK6V"
:center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom">
<bm-view style="width: 100%; height:500px;"></bm-view>
<bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true"
animation="BMAP_ANIMATION_BOUNCE"></bm-marker> <!-- 红点 -->
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<!-- <input type="text" placeholder="请输入搜索关键字" class="serachinput"> -->
</bm-auto-complete>
</bm-control>
<bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
</baidu-map>
</div>
</div>
</template>
<script>
import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map'
export default {
components: {
BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker
},
data() {
return {
city:'',
cityBtn:'选定',
keyword: '',//填写选择的地址
mapStyle: {
width: '100%',
height: this.mapHeight + 'px'
},
center: {lng: 110, lat: 39.915},
zoom: 11
};
},
methods:{
getClickInfo(e){
// debugger
this.center.lng = e.point.lng
this.center.lat = e.point.lat
console.log(e.point.lng,e.point.lat)
},
syncCenterAndZoom (e) {
// debugger
const {lng, lat} = e.target.getCenter()//地图当前的经纬度
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()//地图当前的缩放比例
},
mapBtn(){
this.keyword = this.city
}
}
};
</script>
<style>
.bm-view {
margin: 0 auto;
width: 800px;
height: 500px;
}
.city{
width: 150px;
height: 30px;
border: 1px solid #dddddd;
}
.cityBtn{
width: 50px;
height: 35px;
background-color:green;
color: #ffffff;
border:1px solid green;
vertical-align: top;
}
</style>
Vue Baidu Map局部注册实现和地图绘点的更多相关文章
- vue2.0之Vue Baidu Map 局部注册使用
文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...
- vue Baidu Map --- vue百度地图插件
vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...
- Vue组件全局/局部注册
全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...
- Vue Baidu Map 插件的使用
最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...
- 使用Vue Baidu Map对百度地图实现输入框搜索定位
前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map ...
- Vue 全局注册逐渐 和 局部注册组件
//定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- vue全局注册与局部注册的写法
vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...
- 百度地图实现车辆轨迹移动播放(baidu map api)
开发技术:jquery,js baidu map api,json,ajax QQ1310651206
随机推荐
- linux 一键安装lnmp环境
①,登陆后运行:screen -S lnmp ②.如果提示screen: command not found 命令不存在可以执行: yum install wget ③. 执行命令:wget ...
- 7、TypeScript数据类型
1.变量声明 var 不要使用 建议使用: let 变量 const 常量,一旦申明不能修改 2.数据类型 2.1布尔值:boolean 2.2数字类型 :number 2.3字符串类型:strin ...
- Jenkins安装使用教程
一.说明 持续集成:Continuous integration,CI.包括两层含义,一是指项目的每个开发人员每天都向项目代码仓库要通过git等提交他们的代码,二是指在代码提交后实现自动化的构建.部署 ...
- 使用MobaXterm远程连接Ubuntu,启动Octave,界面不能正常显示
使用MobaXterm远程连接Ubuntu,启动Octave,界面不能正常显示,键盘输入无法显示,解决方法如下. 在启动octave之前,输入这两个命令: export GTK_MODULES=gai ...
- ASP.NET 文件上传的实现(Upload)
1.最近应项目开发的需求要实现附件的异步上传和下载. 2.上传:文件上传到指定的路径下,并返回上传文件的信息给前端界面,如:文件的图标.上传的文件名.文件的大小. 3.上传后,在前端界面上显示上传的文 ...
- 关于input
form表单的使用: 1.iuput:type:类型有很多常用的: text:输入的内容为文本格式(内容可见) password:输入的内容为......(内容不可见) radio:显示为单选框(框为 ...
- Python爬虫入门之Urllib库的基本使用
那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解 ...
- day02 : JPA的基本使用和多种缓存技术对比
1). 按照条件查询标签: ① 在controller种添加方法 [确保表中有数据] /** * 根据条件查询 */ @PostMapping("/search") public ...
- C语言常见易错题集(分析及解答)(仅可用于交流,勿用于商业用途)
1.能正确表示a和b同时为正或同时为负的逻辑表达式是( D ). A.(a>=0||b>=0)&&(a<0||b<0) B.(a> ...
- spring cloud 服务A调用服务B自定义token消失,记录
后端:spring cloud 前端:vue 场景:前端ajax请求,包装自定义请求头token到后台做验证,首先调用A服务,A服务通过Feign调用B服务发现自定义token没有传到B服务去; 原因 ...