在这之前我们必须已经完成了微信JSSDK的配置
如果还没有配置,请看这篇文章
百度JavaScript API Lite
JavaScript API标准版相比，Lite版专门针对移动端H5页面的使用场景，代码体积小，性能更好
获取百度KEY
1.注册成为百度开发者
2.创建一个应用
3.获取专属你的KEY
写一个简单的百度地图(JavaScript API Lite )
1.在项目index.html 中引入百度JavaScript API Lite
<script type="text/javascript" src="//api.map.baidu.com/api?ak=您的密钥&type=lite&v=1.0"></script>2.在需要用到百度地图的组件template中写入
<div id="baiduMap"></div> 3.在需要用到百度地图的组件script-mounted中写入
//创建一个地图实例let map = new BMap.Map("baiduMap"); //创建一个中心点坐标 let point = new BMap.Point(116.404, 39.915); //设置坐标 map.centerAndZoom(point, 15); 此时你就会看到一个简单的百度地图.
你也可以添加链接描述控件
//创建控件 let zoomCtrl = new BMap.ZoomControl(); //添加控件 map.addControl(zoomCtrl); map.addControl(scaleCtrl);JavaScript API Lite 只有一些简单的功能,不得不换JavaScript API v3.0...
使用JavaScript API v3.0
百度地图API 3.0 与百度地图lite 使用方法类似,只不过引入的api文件不一样,百度JavaScript API 3.0 文档
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=obQ9ARXSYP3nswLNHABZopmrIyu2NcRC"></script>使用百度地图碰到的一些坑
坑1:微信SDK getLocation获取的位置为gps 定位,需要手动转为百度的BD09坐标;
//创建坐标 let point = new BMap.Point(longitude, latitude);//微信获取的坐标 let convertor = new BMap.Convertor();// 创建一个坐标转换的实例 let pointArr = [];//定义存放转换点数组 每次最多10个 pointArr.push(point);//将转换点推入 数组 //转换坐标 convertor.translate(pointArr, 1, 5, function (data) { //转换左边后的回调函数, map.centerAndZoom(data.points[0], 15); if(data.status === 0) { //添加三角坐标 let marker = new BMap.Marker(data.points[0]); map.addOverlay(marker); //添加标签 let label = new BMap.Label("你的位置",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label } })坑2:地图安卓页面显示正常,IOS微信端无显示
原因是ios已经要求在APP中的所有对外连接都要使用https，但是我们用的秘钥链接是使用的http
因此我们将index.html 中的script 改一下
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的key&s=1"></script>JavaScript API V2.0 及以上版本支持HTTPS。