集成百度地图

最新推荐文章于 2024-05-10 20:39:48 发布

Chao_nengli

最新推荐文章于 2024-05-10 20:39:48 发布

阅读量329

点赞数

分类专栏： Java 文章标签： javascript java

本文链接：https://blog.csdn.net/Chao_nengli/article/details/126272457

版权

Java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、技术介绍

二、技术使用

主要学习几个简单的技术：定位技术，主要将路径规划和导航，WEB服务主要讲IP定位，查询天气以及电子围栏打卡。

1.账号说明

查看API：搜索百度地图API，点击第一个即可。http://lbsyun.baidu.com

2.技术文档说明

3.入门小DEMO

<!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>Hello, World</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=nRe41jGCELSUQnZ8nZARrN2rvez4uGhL">
    </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);
        // 初始化地图，设置中心点坐标和地图级别
    </script>
</body>

</html>

4.常见API

此时的地图不能进行缩放，可以进行如下设置：

//缩放功能
map.enableScrollWheelZoom(true);

可以给地图中的点添加标注，添加标注的时候要一个point（坐标）对象，把标注添加到坐标位置。

//添加标注
var marker = new BMapGL.Marker(point);
//将标注添加到地图上
map.addOverlay(marker);

可以给当前标注添加点击事件

//给标注添加事件
marker.addEventListener("click",function (){
    alert("您点击了标注！");
});

-----------------------------------------------------

//给标注添加事件:点击标注显示该点的经纬度
marker.addEventListener("click",function (e){
    alert("您点击了标注！"+e.latlng.lng+"--"+e.latlng.lat);
});

也可以把标注拖走

marker.enableDragging();

可以添加信息窗口：

var opts = {

width : 250, //信息窗口宽度

height : 100, //信息窗口高度

title : "Hello" //信息窗口标题

}

var infoWindow = new BMapGL.InfoWindow("World", opts); //创建信息窗口对象

map.openInfoWindow(infoWindow, map.getCenter()); //打开信息窗口

注意：API有很多，并不需要我们全部牢记，只要学会使用API文档，知道怎么样使用百度提供的对象就可以了。