准备环节

首先，去百度地图官网注册账号，申请成为开发者

创建应用

 得到自己的AK秘钥

开始使用 

导入百度地图的api

在js里进行初始化地图逻辑

 此时，我们就得到了最基础的地图啦

 当前地图只能观看当前位置，还不能进行其他操作，接下来让我们给它加上一些控件，让地图变得更加灵活好用

        添加上以下js代码

         map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放// 地图控件var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件map.addControl(cityCtrl);

此时，我们的地图就可以通过鼠标进行放大缩放，有比例尺显示，放大缩小按钮等，还可以左上角快速切换城市

 接下来，我们就开始尝试给地图添加"锚点"，在点下的地方留下标记

 此时就会在点下的地方留下标记啦

 接下来是进行为线、面

接下来还有圈

        var circle = new BMapGL.Circle(point, 1000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆map.addOverlay(circle);

以及文本标注

        var content = "中国，雄狮！";var label = new BMapGL.Label(content, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量})map.addOverlay(label);

效果图 

点开后的信息窗口

var opts = {width: 250,     // 信息窗口宽度height: 200,    // 信息窗口高度title: "爱我中华"  // 信息窗口标题}// 内容var content = `
中国
强大
`// 信息窗口var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象// map.openInfoWindow(infoWindow, point);        // 打开信息窗口// 通过标记添加单击事件，打开信息窗口marker.addEventListener("click",e=>{map.openInfoWindow(infoWindow, point);  })

在vue中使用百度地图

在 pulic 下的 index.html 中引入

 在要使用地图的文件里

加上这句话地图会变为卫星地图哦 ，试试能不能找到自己家吧

map.setMapType(window.BMAP_EARTH_MAP);

 小彩蛋环节

当你把地图设置为卫星地图后，一直进行缩放，你就得到了它

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！