怎么复制百度地图的html⽂件,⼀篇⽂章搞定百度地图基本操作导读
百度地图的强⼤功能我在这⾥就不⼀⼀赘述了，本篇⽂章也只是对百度地图JavaScript API进⾏⼀个介绍，希望可以对⼩伙伴有所帮助，这⾥是本篇⽂章git地址。
⾸先借⽤官⽹的⼀句话介绍⼀下百度地图JavaScript API:
百度地图JavaScript API是⼀套由JavaScript语⾔编写的应⽤程序接⼝，可帮助您在⽹站中构建功能丰富、交互性强的地图应⽤，⽀持PC 端和移动端基于浏览器的地图应⽤开发，且⽀持HTML5特性的地图开发。
此篇⽂章是仿照官⽅提供的⽂档中⽐较基础、适合⼊门的例⼦进⾏编写，觉得介意的⼩伙伴就可以选择退出了哈，不过还是可以稍微瞄⼀眼，哈哈，我们开始~~
战前准备
1. 注册
⾸先在使⽤百度地图之前，⼩伙伴们必须先要拥有⼀个⾃⼰的百度账号，申请注册成为百度开发者，然后创建⼀个应⽤，就可以获取到⼀个唯⼀的服务秘钥(AK)，然后就可以使⽤相关服务了。
具体流程如下：
2.创建应⽤
3. 获取我们的AK
经过以上3步，我想⼤家已经有了属于⾃⼰的⼀个AK了吧，so， 接下来的我将会以React+webpack为技术栈进⾏编写，万变不离其
宗，Vue的⼩伙伴或者使⽤其他技术栈的⼩伙伴都可以借鉴⼀下，我们开始。
Hello 百度地图
react 官⽅也是提供了⼀个很⽅便的脚⼿架⼯具，这⾥就不⼀⼀阐述了，毕竟本篇⽂章的关注点不是这⾥，以后有机会的话可能会单独写⼀篇，⼩伙伴们见谅~~
create-react-app baiduMap
cd baiduMap
npm start
复制代码
2.配置webpack
这⾥配置webpack的主要原因就是解决BMap报错的问题BMap is not defined，在这⾥推荐使⽤webpack最为主要的解决⼿段，就是通过webpack输出对象中的externals属性实现require的访问。
externals:{
'BMap':'BMap'
}
复制代码这⾥webpack的externals的功能我概括为两点：
1.写⼊externals中的依赖是不会被打包进最后的bundle⾥⾯的。
2.虽然它不会被打包，但在程序运⾏的时候你仍然能通过模块化的⽅式去引⼊这些依赖，
如commonJS,AMD,ES6的import等
3.引⼊百度地图api⽂件
在webpack的HTML模板中引⼊
复制代码
4.创建地图容器元素
复制代码
5.创建地图实例
//引⼊地图依赖
import BMap from 'BMap';
...
componentDidMount() {
const map = new BMap.Map("mapContent");
// 创建地图实例
const point = new BMap.Point(116.404, 39.915);
/
/ 创建点坐标
}
复制代码
6.实现
经过以上⼏步，我们就可以出来⼀个很简陋的地图出来了， ，确实是简陋，给⼤家先看⼀下效果
好了，看到这⾥，⼩伙伴们是不是对地图充满兴趣了呢，来我们接着向下看，后⾯有更多有意思的东西在等着你哦 百度地图 冲呀！
此部分是百度地图的主要功能部分，在这⾥给⼩伙伴们具体展⽰⼀下，后续可以根据⾃⼰的需求进⾏修改。
1.设置中⼼点
中⼼点的设置⽅法主要有两种
1. 根据经纬度。
// 创建点坐标
const point = new BMap.Point(116.404, 39.915);
2.根据城市名。
// 直接使⽤城市名作为中间点
复制代码
2.设置Zoom值
// Zoom值其实就是地图可放⼤，可缩⼩的⼀个范围，我们可以设置地图的最⼤最⼩缩放级别
var map = new BMap.Map("mapContent",{minZoom:4,maxZoom:8});
复制代码
3.设置可缩放地图
// 默认的地图是只可以⿏标拖动的，⿏标滚轮不会修改Zoom值
复制代码
4.添加地图控件
// 混合图
var mapType = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
);
// 鹰眼图
var overView = new BMap.OverviewMapControl();
// ⽐例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
// 添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
map.addControl(mapType);
map.addControl(overView);
map.addControl(top_left_control);
map.addControl(top_left_navigation);
复制代码
