项目开发需要使用的地图,通过列表选择地方,在地图中显示对应的位置信息。这里使用百度地图
一,获取应用AK
1、进入百度地图开放平台:百度地图开放平台 | 百度地图API SDK | 地图开发
2、注册账号
3、进行开发者认证
4、创建应用
5、获取应用AK
二、使用 Vue-Baidu-Map插件
Vue Baidu Map (dafrok.github.io)
1、安装插件
//yarn
yarn add vue-baidu-map
//npm
npm i vue-baidu-map
2、全局注册使用
在 main.js 中进行全局引用
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak:'输入你的前面申请的应用AK'
})
页面调用
<template>
<baidu-map class="bm-view" >
</baidu-map>
</template>
<style>
/* 必须设定高度 */
.bm-view{
width: 100%;
height: 300px;
}
</style>
3、局部注册使用
<template>
<baidu-map class="bm-view" ak="申请的应用AK">
</baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map'
export default {
components: {
BaiduMap
}
}
</script>
<style>
/* 必须设定高度 */
.bm-view{
width: 100%;
height: 300px;
}
</style>
三、常用属性
<!--
center:地图定位, 可使用如“广州市海珠区”的地区字符串,也可以使用经纬度对象如 {lng: 116.404, lat: 39.915}
zoom:缩放等级
scroll-wheel-zoom:允许鼠标滚轮缩放
dragging:允许拖拽
-->
<baidu-map
class="map"
center="北京"
zoom="15"
scroll-wheel-zoom="true"
dragging="true"
>
</baidu-map>
四、常用控件
1、缩放
<baidu-map class="map" center="北京">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
2、地图类型
<baidu-map class="map" center="北京">
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
</baidu-map>
3、定位
<baidu-map class="map" center="北京">
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
</baidu-map>
4、比例尺
<baidu-map class="map" center="北京">
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
</baidu-map>
5、检索
<baidu-map>
<bm-view class="map"></bm-view>
<bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
</baidu-map>
<script>
export default {
data () {
return {
location: '北京',
keyword: '百度' //keyword 可以是字符串,也可以是字符串数组
}
}
}
</script>
样例:
<div class="map" :style="{width:(mapWidth)+'px'}">
<baidu-map class="baiduMap" ref="bmap"
:center="bdCenter" :zoom="bdZoom"
:scroll-wheel-zoom="true"
:dragging="bdscrollWheelZoom"
:auto-resize="true"
@ready="handleMapReady"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom">
<bm-marker
:position="bdCenter"
:dragging="true"
@click="infoWindowOpen"
:animation="bdAnimation">
<!-- <bm-label
:labelStyle="bdLabelStyle"
:content="bdContent"
:offset="bdOffset"/> -->
<bm-info-window
:show="bmInfoWindow"
@close="infoWindowClose"
@open="infoWindowOpen">
<p>办公地址:123</p>
<p>联系方式:123</p>
<p>电子邮箱:123</p>
</bm-info-window>
</bm-marker>
<bm-navigation :anchor="bdAnchorRight" />
<!-- <bm-map-type
:map-types="bdBmmapTypes"
:anchor="bdTypesBnchor" /> -->
<bm-geolocation
:anchor="bdBottomBnchor"
:showAddressBar="true"
:autoLocation="true" />
<!-- <bm-scale :anchor="bdAnchorRight"></bm-scale> -->
</baidu-map>
</div>
<script>
export default{
data() {
return {
bdCenter: { lng: 118.437543, lat: 31.361521 },
bdZoom: 10, //缩放等级设置
bdContent:'123',
bdLabelStyle: {
color: 'black',
borderRadius:'5px',
borderColor: '#ccc',
fontSize : '12px',
height:'30px',
padding: '10px',
fontFamily:'苹方'
},
bdOffset: {width: -35, height: 30},
bdscrollWheelZoom:true, //鼠标缩放
bdDragging:true, //可拖拽
bdAnchorRight:'BMAP_ANCHOR_TOP_RIGHT', //缩放
bdBmmapTypes:['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP'], //查看地图类型添加
bdTypesBnchor:"BMAP_ANCHOR_TOP_LEFT",
bdBottomBnchor:"BMAP_ANCHOR_BOTTOM_RIGHT",
bdAnimation:"BMAP_ANIMATION_BOUNCE",
bmInfoWindow:false,
mapWidth:document.documentElement.clientWidth/2
};
},
mounted(){
window.onresize = ()=>{
this.mapWidth = document.documentElement.clientWidth/2
}
},
methods: {
handleMapReady({BMap, map}) {
// console.log(BMap, map)
// 经度
this.bdCenter.lng = 118.437543
// 纬度
this.bdCenter.lat = 31.361521
this.bdZoom = 15
map.panBy(10, 5)
// this.$nextTick(()=>{
// map.centerAndZoom(new BMap.Point("118.437543","31.361521"), 15);
// })
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
},
syncCenterAndZoom (e) {
// const {lng, lat} = e.target.getCenter()
this.bdCenter.lng = 118.437543
this.bdCenter.lat = 31.361521
this.bdZoom = e.target.getZoom()
},
infoWindowClose () {
this.bmInfoWindow = false
},
infoWindowOpen () {
this.bmInfoWindow = true
}
},
};
</script>