vue项目中使用百度地图

安装

首先在vue项目中，我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk。
官方文档

JavaScript API v2.0类参考

npm install --save vue-baidu-map

全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: 'YOUR_APP_KEY'
})

局部注册

如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

<template><baidu-map class="bm-view" ak="YOUR_APP_KEY"></baidu-map>
</template><script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {components: {BaiduMap}
}
</script>

实例组件

<template><div class='map-wrap'><baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" :point="true" @ready="handler"><bm-marker :position="center" :dragging="true" /><bm-view class="map" /><!-- 官网搜索api --><!-- <bm-control :offset="{width: '10px', height: '10px'}"><bm-auto-complete v-model="address" :sugStyle="{zIndex: 3000}"><input placeholder="请输入地名关键字" /></bm-auto-complete></bm-control> --><!-- <bm-local-search :keyword="address" :auto-viewport="true" @searchcomplete="onSearchComplete" :panel="false" /> --></baidu-map><div class="search-wrap"><!-- 搜索框 --><div class="search"><el-input placeholder="请输入内容" v-model="address" class="input-with-select"><el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button></el-input></div><!-- 检索结果 --><div v-show="showResultFlag" class="search-result"><div v-for="(item, index) in searchResult" class="item" :key="index" @click="handleSelect(item)"><p class="title">{{ item.title }}</p><p class="address">{{ item.address }}</p></div></div></div></div>
</template>
<script>
const defaultInfo = {lng: 0,lat: 0,addressStr: '',title: '',province: '', // 省city: '', // 市district: '' // 区
}
export default {name: 'Map',data() {return {BMap: null,map: null,zoom: 15,//地图放大缩小的值center: { lng: 116.404, lat: 39.915 },//地图坐标address: '',//搜索地址searchResult: [],//自动匹配地址结果showResultFlag: false,selectInfo: Object.assign({}, defaultInfo)}},mounted(){this.address = ""},methods: {handler({ BMap, map }) {this.BMap = BMapthis.map = mapconst geolocation = new BMap.Geolocation()const that = thisgeolocation.getCurrentPosition(function (r) {const position = {lng: r.point.lng,lat: r.point.lat}that.center = position}, { enableHighAccuracy: true })this.zoom = 15},handleSelect(item) {let self = thisconsole.log('item', item)let title = item.titlelet { lng, lat } = item.marker.point// 以下代码是为了根据经纬度去转换出 省、市、区的信息出来。如果，不需要，可以自行修改。let point = new this.BMap.Point(lng, lat)let geoc = new this.BMap.Geocoder()geoc.getLocation(point, function (res) {let addString =res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + titleself.showResultFlag = falseself.address = addStringself.map.clearOverlays() //清除地图上所有覆盖物pointself.map.addOverlay(new self.BMap.Marker({ lng, lat }))self.center.lng = lngself.center.lat = latself.zoom = 20,self.selectInfo = {lng,lat,addressStr: addString,title: title,province: res.addressComponents.province,city: res.addressComponents.city,district: res.addressComponents.district}})},onSearchComplete(res) {if (res && res.Xr) {this.searchResult = [...res.Xr]if (this.searchResult.length > 0) {this.showResultFlag = true} else {this.showResultFlag = false}}},handleSearch() {let self = this// self.showResultFlag = trueself.selectInfo = Object.assign({}, defaultInfo)let local = new this.BMap.LocalSearch(this.map, {renderOptions: {map: this.map,selectFirstResult: false},onSearchComplete: function (res) {console.log(res);if (res && res.Xr) {self.searchResult = [...res.Xr]if (self.searchResult.length > 0) {self.showResultFlag = true} else {self.showResultFlag = false}} else {self.showResultFlag = false}}})local.search(this.address)}}
}
</script>
<style lang="scss" scoped>
.map-wrap {position: relative;.search{width: 300px;margin: 5px;}.search-result{width: 300px;margin-left: 5px;padding: 10px;background: #fff;max-height: 300px;overflow-y: auto;}.bm-view {height: 500px;.map {width: 100%;height: 100%;}}.search-wrap{position: absolute;top: 0;left: 0;}
}
</style>

vue项目中使用百度地图相关推荐

vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
笔记：vue项目中引用百度地图，地图空白现象
最近在项目中使用百度离线地图,可是一切都正常完成的情况下.页面中的地图区域居然是显示空白的: 检查了好久,发现是自己的全局样式造成的: 解决:将全局样式中img标签的max-width和max-hei ...
Vue项目中使用百度地图+mapv
1.安装依赖 npm install vue-baidu-map --save npm install mapv --save 2.main.js import BaiduMap from " ...
vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台登录后到控制台,然后创建应用,选择对应的配置创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
Vue项目中使用百度地图API
百度地图官方文档 1. 申请百度账号和ak 申请 2. 引用百度地图API文件 <script type="text/javascript" src="https: ...
前端项目中使用百度地图api，含实例
前言一.使用百度地图接口的步骤二.简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注.信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 ...
Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图
2019独角兽企业重金招聘Python工程师标准>>> 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不 ...

vue项目中使用百度地图

安装

全局注册

局部注册

实例组件

vue项目中使用百度地图相关推荐

最新文章

热门文章