主流框架（react、vue）引入百度地图方式汇总
首先到百度地图官网以开发者身份申请一个百度地图ak密钥。百度地图api官方地址：https://lbsyun.baidu.com/index.php?title=jspopularGLReact：一、以组件化使用百度地图（React-BMapGL）组件文档地址：https://gitee.com/mirrors/react-bmap?skip_mobile=true...
首先到百度地图官网以开发者身份申请一个百度地图ak密钥。
百度地图api官方地址：
https://lbsyun.baidu.com/index.php?title=jspopularGL
React：
一、以组件化使用百度地图（React-BMapGL）
组件文档地址：
https://gitee.com/mirrors/react-bmap?skip_mobile=true
用组件的方式引入百度地图：
在此用到的组件是react-BMapGL。该组件是封装的特别适配react框架的react组件。
引入：
在react框架下的index.html或者document.ejs中引入脚本：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>然后npm安装react-BMapGL：
npm install react-bmap这样就可以在组件中调用百度地图了。
使用：
1.组件化使用
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'
<Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
<Marker position={{lng: 116.402544, lat: 39.928216}} />
</Map>实现效果：
可以看出该种使用方式是通过import方式将整体的百度地图map以组件的形式引入到js文件里面，然后在react的render中将组件渲染出来。该种方式的优点是封装性好，直接就可以使用，但是缺点也很明显，也是因为封装性太好所以很多api没暴露出来，导致很多操作无法进行，比如想要在地图点加载完成后出现提示等，不好实现。
2.组件化引入，map形式调用
该种方法还是基于react-bmapgl来实现，不过不同的是将整体的底图map以组件形式引入之后，将其中的map实例通过this.ref暴露出来，然后通过调用该实例并对该实例进行操作来实现地图上打点，画圆等操作。
示例代码：
<Map ref={ref => {this.map = ref.map}} />此时this.map就是实例化的百度地图实例，再调用打点等方法就可以在实例化的地图上进行打点了。
此时可能会有疑问，进行打点的话不仅仅需要有一个实例化的地图，还需要有有百度地图的构造器来进行点或覆盖物的构造，因为安装react-bmapgl时候引入了百度的script脚本的缘故，所以可以直接调用new BMap来进行构造：
const mPoint = new BMapGL.Point(point.lng, point.lat);
this.map.addOverlay(mPoint);可以看出该种方式封装性没有那么好，但是胜在灵活，对于打点，添加地图覆盖物，添加覆盖物后的回调函数等操作均可自主把控，所以可担任复杂任务的性能比第一种胜出很多。
二、自主封装百度地图组件
该种方式引入百度地图可参照前文给出的百度地图官方api地址。
引入：
同样是通过script脚本形式来引入百度函数构造器：BMap
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>这样就可以在项目各处均可调用构造器BMap了。
使用：
示例程序：
import React, { Component } from 'react';
class MapPage extends Component {
constructor(props) {
super(props);
this.state = {};
this.mapRef = React.createRef();
this.map = null; // 地图实例化存放容器
}
componentDidMount() {
this.mapInit();
}
// 地图初始化
mapInit() {
this.map = new BMapGL.Map(this..mapRef.current); // 创建Map实例
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
// 开启鼠标滚轮缩放
this.map.enableScrollWheelZoom(true);
}
render() {
return (
<div ref={this.mapRef} className={styles.map} />
);
}
}
export default MapPage;如上图实例代码所示，可以通过ref方式来将实例化的百度地图挂载到dom节点，除了这种挂载方式还有使用id方式来进行挂载：
this.map = new BMapGL.Map('container'); // 创建Map实例
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
<div id="container"></div>如上述代码所示，该种方式就是通过id方式进行挂载地图，使用id方式进行挂载的时候要注意该id在当前展示页面中必须为唯一id，否则会出现挂载错乱，或者程序运行了地图不展示的问题。但是使用ref来进行挂载则不必担心这个问题。
程序运行效果：
然后可以再调用百度地图的打点方法，或者添加覆盖物方法来对实例化的this.map来进行操作从而实现在地图上显示点、线、面等操作。
对比总结：
这两种在react中引入百度地图的方式各有优劣。
使用react-bmapgl方式进行引入优点是react-bmapgl封装性较好，只需要设置好api然后将dom节点挂载上去就可以实现地图打点，添加覆盖物等基础操作。但是到了百度地图比较复杂的操作的时候就必须得从react-bmapgl中将实例化的map实例引出来进行操作。毕竟百度地图所能实现的效果中不是所有的操作都可以在react-bmapgl预先设置好的dom结构中实现。而且引入错误出现错误的时候出现的各种错误得自己从源码中结合百度地图的官方api文档来查找问题。
使用原始的百度地图引入方式进行引入的优点是足够灵活，只需要引入百度地图的script脚本然后将百度地图实例化就可以参照百度地图官方api文档来对实例化的map实例来进行各种操作。好处是遵循了官方文档中说明的引入逻辑，引入或者调用错误的时候可以到官方api中很快的查找出是否是api调用错误还是其他错误。缺点是则是不够模块化，每次开始一个新项目就得自己封装一个新的map组件来供项目使用。
但是注意该两种引入方式都得使用script脚本方式将百度地图构造器脚本引入，相当于将百度地图的脚本进行了一个全局加载。有可能会拖慢项目效率。后续优化可以使用按需加载script方式来进行优化。
Vue：
一、全局引入百度地图
和react引入方式类似，也是在vue项目的index.html中来引入百度地图apiscript脚本方式来引入：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>同样的，这样就可以在项目各处均可使用this.BMapGL构造器了。
示例代码：
<template>
<div ref={'map'} className={styles.map} />
</template>
<script>
export default {
name: 'MapPage',
props: {},
data() {
return {
map: null, // 地图容器
}
},
mounted() {
this.map = new BMap.Map(this.$refs.map); // 创建Map实例
// 初始化地图,设置中心点坐标和地图级别
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 开启鼠标滚轮缩放
this.map.enableScrollWheelZoom(true);
},
components: {},
methods: {},
watch: {}
}
</script>
<style scoped lang="scss">
.map{
width:500px;
height:500px;
}
</style>跟react类似自然也可以使用id进行加载，使用id进行加载的方式和优缺点和前文叙述的react中使用id进行加载基本类似，在这不做赘述。
将map实例化，然后构建完底图之后就可以通过操纵实例化的this.map来实现添加点，添加覆盖物或者添加地图控件等其他基本操作了。同样因为该方式是在根html文件上加载script脚本，所以为全局引入。
二、引入并使用组件化的百度地图（vue-baidu-map）
官方文档：
https://dafrok.github.io/vue-baidu-map
安装：
npm install vue-baidu-map引入：
有两种引入方式，这两种引入方式均可以：
第一种：
main.js中引入：
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: "你的百度ak秘钥" })页面中使用（记得要有个高度属性，同时别忘了在组件的components中引入）
<baidu-map :center="{lng:104.116729,lat:30.629222} " zoom="17" style="height:300px"> </baidu-map>第二种：
直接在页面种使用（同时也需要在组件的components中引入）：
<template>
<BMap
ak="你的百度ak秘钥"
class="map"
:center="{lng:104.116729,lat:30.629222} "
zoom="17"
>
</template>
<script>
import BMap from 'vue-baidu-map/components/map/Map'
export default {
name: 'map',
props: {},
data() {
return {}
},
components: {
BMap
}
}
</script>
<style scoped lang="scss">
.map {
width: 100%;
height: 45vh;
}
</style>实现效果：
实例化map和百度地图构造函数
和react-baidmapgl一样，vue-baid-map也保留了实例化的map和构造函数的出口，我们在加载底图之后可以通过调用该方法将实例化的map和百度地图构造函数BMap导出然后再操作实例化的map来实现给地图打点等操作。
示例代码：
<template>
<BMap
ak="你的百度ak密钥"
class="map"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
@ready="bMapLoad"
>
</BMap>
</template>
<script>
import BMap from 'vue-baidu-map/components/map/Map'
let mapConstructor; // 百度地图构造函数存放容器
export default {
name: 'map',
props: {},
data() {
return {
mapPoint,
center: {
lng: 116.404,
lat: 39.915
},
zoom: 15,
map: null, // 地图容器
BMap: null, // 构造器容器
}
},
components: {
BMap
},
methods: {
// BMap加载触发实例化方法
bMapLoad({BMap, map}) {
// 百度地图容器全局化
this.map = map;
// 百度地图构造函数全局化
mapConstructor = BMap;
this.BMap = BMap;
this.bMapPoint(this.center);
},
// 在百度地图上打点方法
bMapPoint(item) {
// 清除地图上的覆盖物
this.map.clearOverlays();
const mPoint = new mapConstructor.Point(point.lng, point.lat);
this.map.addOverlay(mPoint);
}
},
watch: {}
}
</script>
<style scoped lang="scss">
.map {
width: 100%;
height: 45vh;
}
</style>实现效果：
也就是说在该情景下vue-baidu-map仅仅是起到了一个挂载dom节点的作用，然后把实例化的map底图和百度地图构造函数BMap给暴露出来，然后对实例化的map底图调用addLayer等方法来实现点或者其他覆盖物在地图上的添加。
对比总结：
这两种方式的优缺点与react框架中的原生引入和react-bmapgl优缺点类似，但是在使用vue-baidu-map组件的时候要注意有的时候因为源码的不完善可能会有报错，就比如引入百度地图定位控件的时候，进行传参的话可能会出现传参类型错误的问题。就这个问题而言看源码发现是vue-baidu-map的定位控件中的watch监听有问题，针对这种源码所出现的问题就需要将源码改造一下然后当作一个外置的组件引入地图之中。
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)