需求:在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局部注册实现和地图绘点的更多相关文章

  1. vue2.0之Vue Baidu Map 局部注册使用

    文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...

  2. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

  3. Vue组件全局/局部注册

    全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...

  4. Vue Baidu Map 插件的使用

    最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...

  5. 使用Vue Baidu Map对百度地图实现输入框搜索定位

    前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map     ...

  6. Vue 全局注册逐渐 和 局部注册组件

    //定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...

  7. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  8. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

  9. 百度地图实现车辆轨迹移动播放(baidu map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206

随机推荐

  1. linux bash array list

    #定义array ptpArray=()while read linedo #将文件读取内容放到array中,注意作为字符串放,否则空格会被分隔成行ptpArray+=("$line&quo ...

  2. 【转】FluentAPI详细用法

    设置主键modelBuilder.Entity<x>().HasKey(t => t.Name); 设置联合主键modelBuilder.Entity<x>().HasK ...

  3. 安全基线自动化扫描、生成报告、加固的实现(以Tomcat为例)

    一.背景说明 当前在服务上线前,安全部门都会对服务基线配置进行把关,整个流程可以分为扫描.生成报告.修复三步. 在执行这一流程时当前普遍的做法是半自动化的,扫描和生成报告是自动化的,执行扫描.执行生成 ...

  4. 缓冲区 subprocess 黏包

    一.缓冲区   每个socket被创建以后,都会分配两个缓冲区,输入缓冲区和输出缓冲区,默认大小都为8k,可以通过getsocket()获取,暂时存放传输数据,防止程序在发送数据的时候卡组,提高代码运 ...

  5. 从码农到技术总监分享Leader经验

    从一个毕业的IT小伙或者一个码农成长为一个管理者,有很多需要转变的思想,那么当你遇到了瓶颈,或许我的经验能帮到你,感谢. 系统的掌握了.NET,JAVA技术,能够熟练的使用springcloud + ...

  6. 搜索引擎中index、attribute和summary概念

    index:倒排索引 attribute: 正排索引 summary:数据集合,用于数据结果展示.

  7. 跟随我在oracle学习php(10)

    正则表达式 做验证 做匹配 用符号来描述书写规则:/ 中间写正则表达式 /^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾\d:一个任意的数字\w:一个任意的数字或字母\ ...

  8. [Err] 1093 - You can't specify target table 'master_data' for update in FROM clause

    delete from master_data where category_id not in (select category_id from master_data a, bc_category ...

  9. 说说Android项目中的armeabi,armeabi-v7a和x86

    1.区别    这三者都表示的是CPU类型,早期的Android系统几乎只支持ARMv5的CPU架构,但是现在已经有7种了.ARMv5,ARMv7 (从2010年起),x86 (从2011年起),MI ...

  10. BPM与OA区别

    核心差异: OA解决的是流程有无问题 BPM解决的是流程更好更优的问题 主要差异如下: 1.BPM有更好的广度跟深度 这里的广度是指应用场景的广度. BPM一般都会以端到端的方式衔接企业运营过程的上下 ...