如何在vue中调取百度地图

前言

最近公司有一个项目，需要用到百度地图，百度地图有一个比较好的地方，有一个定制个性地图的功能，自己可以根据需要，定制特定地物的颜色，以及地图的背景颜色，等等，在项目中使用还是比较方便的。

注意：想要调取百度地图的服务，也要申请一个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
            }
          }
        ]
	}
}