如何在自己的企业网站中添加百度地图

给企业网站加百度地图，最省事的做法是用百度地图开放平台的JavaScript API。别一上来就找插件或者截图，截图不能拖动、不能缩放，客户想导航还得自己复制地址，体验差一截。百度地图的接口免费额度对普通企业站足够用，接入也不复杂，前端加一段脚本、一个容器、几十行初始化代码就能跑起来。

先去百度地图开放平台注册开发者账号，完成认证。个人认证和企业认证的配额不一样，企业网站建议做企业认证，后面调用量上来不容易被卡。登录后进控制台，创建应用，应用类型选“浏览器端”，别选成服务端。创建时会让你填Referer白名单，这里填你网站的实际域名，比如公司官网的域名，不带http://和路径。本地调试可以临时加localhost，但上线前记得删掉。白名单不要图省事填星号，否则别人把AK拿去用，配额很快会被刷完。创建完拿到一串AK，这就是后面代码里要用的密钥。

页面里先放一个容器，宽高必须给清楚。很多人地图不出来，就是容器高度写成0或者没写。可以这样：

然后引入百度地图的脚本。用v3.0版本就行，稳定、资料多：

如果公司网站已经全站HTTPS，脚本地址也要用https，不然浏览器会拦混合内容。引入之后写初始化：

var map = new BMap.Map("map");
　　var point = new BMap.Point(116.404, 39.915);
　　map.centerAndZoom(point, 16);
　　map.enableScrollWheelZoom(true);

经纬度换成公司实际位置。百度地图坐标拾取器可以直接点选，别拿高德或腾讯的坐标直接用，坐标系不一样，偏几百米很正常。中心点设好后，加个标记：

var marker = new BMap.Marker(point);
　　map.addOverlay(marker);

再挂个信息窗口，把公司名、地址、电话写进去，点击标记弹出：

var infoWindow = new BMap.InfoWindow("公司名称
详细地址
联系电话");
　　marker.addEventListener("click", function(){
　　 map.openInfoWindow(infoWindow, point);
　　});

这样基本功能就有了。想让地图风格跟网站更搭，可以在开放平台配自定义地图样式，生成样式ID后初始化时加style参数。需要缩放控件、比例尺，用map.addControl(new BMap.NavigationControl())和map.addControl(new BMap.ScaleControl())，按需加，别堆太多。

移动端要注意容器高度别写死太大，用百分比或者媒体查询调一下。地图默认支持手势缩放，但页面滚动时容易误触，可以设置map.disableDragging()在移动端关掉拖拽，或者保留但提示用户。另外，百度地图JavaScript API GL版也出来了，性能更好，三维效果更顺，写法类似，把BMap换成BMapGL就行。老项目用v3.0足够，新项目可以试GL版。

踩过的坑说几个。AK报错“APP服务被禁用”，九成是Referer白名单没配对上，检查域名有没有带www、有没有端口号。本地能显示线上不显示，看看线上是不是HTTPS而脚本写的HTTP。地图容器父级用了display:none，初始化时拿不到宽高，也会白屏，等容器显示后再初始化。还有，别把AK硬编码在多个页面里，统一放一个公共JS文件，后面换AK省事。

如果只是展示一张不可交互的地址图，百度地图静态图API也能用，一个img标签搞定，但企业网站要的是客户能拖能缩、能点标记看详情，还是JavaScript API更合适。按上面流程走一遍，半小时内就能上线。