前言
最近公司有一个项目,需要用到百度地图,百度地图有一个比较好的地方,有一个定制个性地图的功能,自己可以根据需要,定制特定地物的颜色,以及地图的背景颜色,等等,在项目中使用还是比较方便的。
注意:想要调取百度地图的服务,也要申请一个ak值。
话不多说,开搞!
1.如何在vue中调取百度地图
百度开发者平台已经封装了基于vue的地图组件,详细的使用方法,我们可以参考官网。
vue-baidu-map官网
第一步:通过npm进行安装vue-baidu-map
npm install vue-baidu-map --save
安装完成后,我们可以在node_modules中找到安装好的vue-baidu-map
,可以看到如下几个组件:
它们都是以组件的形式存在的。
第二步:在vue页面中进行引入组件
<script>
//引入组件
import BaiduMap from './module/MapChina'
import BmScale from 'vue-baidu-map/components/controls/Scale' //比例尺控件
import BmView from 'vue-baidu-map/components/map/MapView' //地图视图控件
//import BmNavigation from 'vue-baidu-map/components/controls/Navigation' //缩放控件
export default {
components: {
//注册组件
BaiduMap,
BmScale,
BmView,
//BmNavigation,
}
}
</script>
以BaiduMap
这个组件为例,我们打开BaiduMap
这个组件,看一下:
我们在使用这些组件的过程中,要给这些组件进行传值。
<template>
<div id='map_box'>
<baidu-map class='map' :center='北京' :ak='自己的ak值' :zoom='5' :min-zoom='5' :dragging='true' :scroll-wheel-zoom='true' :theme='theme'>
<bm-view style="width: 100%; height: 100%; flex: 1;"></bm-view>
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
</baidu-map>
</div>
</template>
这样,页面中就能显示地图了。
vue-baidu-map
中也可以直接加载交通流量图。使用方法,和上面一样,组件使用三部曲。
2.如何在线定制自己的个性地图
第一步:在百度地图开发者平台注册。
第二步:找到百度地图个性在线编辑器
我们在配置出我们需要的样式后,可以通过点击页面中的查看JSON
这个按钮,生成相应的JSON格式的样式代码。
然后我们通过父子传值,设置theme,来设置自己的地图样式。
data() {
return {
theme: [
{
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#212121"
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#2b2b2b"
}
},
{
"featureType": "highway",
"elementType": "all",
"stylers": {
"lightness": -42,
"saturation": -91
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"lightness": -77,
"saturation": -94
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#001666"
}
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#000c31"
}
},
{
"featureType": "subway",
"elementType": "geometry.stroke",
"stylers": {
"color": "#b7b7b7"
}
},
{
"featureType": "railway",
"elementType": "geometry",
"stylers": {
"lightness": -52
}
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#313131"
}
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": {
"color": "#8b8787"
}
},
{
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"color": "#000c30"
}
},
{
"featureType": "local",
"elementType": "geometry",
"stylers": {
"lightness": -75,
"saturation": -91
}
},
{
"featureType": "subway",
"elementType": "geometry",
"stylers": {
"lightness": -65
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"lightness": -40
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#ffff00ff",
"weight": "1",
"lightness": -38
}
},
{
"featureType": "background",
"elementType": "geometry",
"stylers": {
"color": "#000f37",
"weight": "1",
"lightness": -29
}
}
]
}
}