2020.05.27百度地图总结

@烟花易冷

2020/05/27

头疼的一天

百度地图

初始化

1.注册开发者账号 申请ak
2. 导入百度地图script

 <script
        type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&ak=webgl&ak=zlj7utzrTltxltQyOD9lphUFMoHGLM5b"
    ></script>

3. 准备存放地图的容器

<div id="container"></div>

4. 创建地图

var map = new BMap.Map("container");

5. 添加中心点

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

控制

 map.addControl(new BMap.NavigationControl());
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.addControl(new BMap.MapTypeControl());

覆盖

点

1. 创建点

var point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

2. 显示点

 var marker = new BMap.Marker(point,); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中

3. 图标

 let icon = new BMap.Icon("./lo.png", new BMap.Size(36, 42), {
                imageSize: new BMap.Size(36, 42),
                anchor: new BMap.Size(18, 42),
            });
map.addOverlay(point,{icon:icon});

圆

1. 创建圆

 //添加圆圈
            var circle = new BMap.Circle(point, 500, {
                strokeColor: "blue",
                strokeWeight: 2,
                fillOpacity: 0.4,
            });

2. 显示圆

 var marker = new BMap.Marker(point,); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中

多边形

var polygon = new BMap.Polygon(
                [
                    new BMap.Point(116.39393897828818, 39.92230467009987),
                    new BMap.Point(116.42060068582431, 39.922415339712224),
                    new BMap.Point(116.41384542838928, 39.906034275794205),
                    new BMap.Point(116.40011932019682, 39.90382031561685),
                    new BMap.Point(116.38747117861632, 39.91372722668822),
                    new BMap.Point(116.39393897828818, 39.92230467009987),
                ],
                {
                    strokeColor: "orange",
                    strokeWeight: 2,
                    fillColor: "skyblue",
                    fillOpacity: 0.4,
                }
            );
            map.addOverlay(polygon);

事件

  map.addEventListener("click", (e) => {
                console.log(e.point);
            });  经纬度

信息窗口

1. 创建窗口

var opts = {
                width: 250, // 信息窗口宽度
                height: 100, // 信息窗口高度
                title: "Hello", // 信息窗口标题
            };
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象

2. 显示窗口

 map.openInfoWindow(infoWindow, point);

搜索

1. 创建

let local = new BMap.LocalSearch(map, {
                renderOptions: { map: map },
            });

2. 搜索

 function blurHd(v) {
                // console.log(v);
                local.search(v);
            }

导航

 var driving = new BMap.DrivingRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true,
                },
                onSearchComplete: function (results) {
                    if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                        // 获取第一条方案
                        var plan = results.getPlan(0);
                        // 获取方案的驾车线路
                        var route = plan.getRoute(0);
                        // 获取每个关键步骤，并输出到页面
                        var s = [];
                        for (var i = 0; i < route.getNumSteps(); i++) {
                            var step = route.getStep(i);
                            console.log(step);
                        }
                    }
                },
            });

api

1. 通过给定请求api服务器地址返回相应数据
2. 通过ip返回城市名称

http://api.map.baidu.com/location/ip?ak=webgl&ak=你的ak&coor=bd09ll&output=jsonp