Java百度地图技术-基础

Ape 佬

已于 2022-08-24 21:04:15 修改

阅读量1.2k

点赞数

分类专栏： java地图文章标签： java 开发语言

于 2022-08-14 13:42:00 首次发布

本文链接：https://blog.csdn.net/m0_61940426/article/details/126320702

版权

java地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、地图技术概述：

2、百度地图开发平台：

（1）进入平台后进行个人开发的认证，认证完成后就可以在该平台上使用了

（2）创建应用，基于后续使用：

（3）获取到AK：

3、百度地图基础API应用：

（1）创建项目：创建一个新的Maven项目，然后在资源static创建新的html界面进行入门应用：

其html内容为：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
//记得修改下面这句，把自己的密钥修改一下
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setHeading(64.5);   //设置地图旋转角度
    map.setTilt(73);       //设置地图的倾斜角度

    // 禁止地图旋转和倾斜可以通过配置项进行设置
    // var map = new BMapGL.Map("allmap",{
    //     enableRotate: false,
    //     enableTilt: false
    // });
</script>
</body>
</html>

（2）基础效果：

（3）添加控件：

  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

（4）添加覆盖物：

    //添加标注或图标
      // 方式一
    var marker = new BMapGL.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
      // 方式二
    var myIcon = new BMapGL.Icon("风景.png", new BMapGL.Size(250, 250), {
        // 指定定位位置。
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
        // 图标中央下端的尖角位置。  左右
        anchor: new BMapGL.Size(0, 25),
        // 设置图片偏移。
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。  上下
        imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
    });
    // 创建标注对象并添加到地图
    var marker = new BMapGL.Marker(point, {icon: myIcon});
    map.addOverlay(marker);
    marker.addEventListener("click", function(){
        alert("您点击了标注");
    });

    //添加折线
    var polyline = new BMapGL.Polyline([
        new BMapGL.Point(116.399, 39.910),
        new BMapGL.Point(116.405, 39.920),
        new BMapGL.Point(116.425, 39.900)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polyline);

    //添加多边形
    var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polygon);

    //圆形
    var circle = new BMapGL.Circle(point,1000,{
        strokeWeight:3,
        strokeOpacity:0.8,
        strokeColor:"red"
    })
    map.addOverlay(circle);

（5）地图事件：

    //条件事件：
    map.addEventListener('click', function(e) {
        alert('click!')
    });

    //点击显示经纬度 墨卡托坐标
    map.addEventListener('click', function(e) {
        alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
        var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
        alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
    });

    //移除事件
    map.addEventListener('click', handleClick);
    function handleClick (e) {
        alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
        var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
        alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
    }
    map.removeEventListener('click', handleClick);

（6）地图样式：

<script type="text/javascript">


    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

</script>

（7）地图检索：

<script type="text/javascript">

    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var local = new BMapGL.LocalSearch(map, {
        renderOptions:{map: map},
// 数量
        pageCapacity:100
    });
// 关键字
    local.search("银行");

</script>

圆形范围检索：

    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 
    //圆形检索：
    var circle = new BMapGL.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    var local =  new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
    local.searchNearby('餐馆',point,1000);

以上技术都可以通过搜索图片上的网址到官方网站上查看相应的详细流程！