百度地图入门

最新推荐文章于 2022-10-31 23:23:11 发布

ann0302

最新推荐文章于 2022-10-31 23:23:11 发布

阅读量303

点赞数 1

本文链接：https://blog.csdn.net/qq_40353662/article/details/80777857

版权

百度地图

百度地图提供了非常完整的地图信息策略，并且可以根据用户指定的地理位置信息进行定位。
首先，使用API要申请百度密钥（akx）
地址：http://developer.baidu.com/map/

注册百度开发者账户：http://developer.baidu.com/
这里写图片描述

这里写图片描述

下面介绍一下为百度地图添加控件的方法

1 、Control类—–控件类

（1）ScaleControl类——表示比例控件

构造器为ScaleControl()
方法：setUnit()—-设置比例尺的单位
getUnit()——获取比例尺的单位

(2) NavigationControl类—-表示移动缩放控件

2、 Overlay类—-地图的遮盖物
Maker类——表示地图上的一个图像标注
构造器——Maker(point) // point是标注的坐标值
Map对象添加遮盖物——addOverlay(maker)

3、 Point类——表示一个地理坐标点
构造器—–point(lng,lat) //lng—– number类型，表示经度；lat—–number类型，表示纬度

4、核心类——Map类

构造类—-BMap.Map(容器id)
方法：centerAndZoom()—–初始化方法
addControl()——添加控件
addOverlay()——添加标注

如何获取经度和纬度？

方法一：使用浏览器定位

  Geolocation 类
  作用：返回用户当前的位置
  构造器—–Geolocation（）
  方法：getCurrentPosition(callback)
      参数callback,定位成功，该回调函数具有一个GeolocationResult类

方法二：使用地址解析方式

  Geocoder类
  作用：用于获取用户的地址解析
  构造器—-Geocoder()
  方法：getPoint(address,callback,city)
  参数address—–设置地址解析的内容
          callback—–回调函数，地址定位成功，具有point参数
          city—–当前中心城市
例如：

var geo=new BMap.Geocoder();
geo.getPoint("北京市海淀区万寿西路"，function(point){
    var marker=new BMap.marker(point);
    map.addOverlay(marker);
    }
)

申请密钥后填写在下面代码中的 script标签的ak=密钥，可以显示地图。

<!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 src="http://api.map.baidu.com/api?
    v=2.0&ak=u70A5pnNrRtRT1XAgwM5jL2YIVj1Gv97">
    </script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例       天安门经度纬度
    var point = new BMap.Point(116.300814,39.915799);
    // 创建点坐标
    map.centerAndZoom(point, 15);//1~19
    // 初始化地图，设置中心点坐标和地图级别
    //添加导航控件
    map.addControl(new BMap.NavigationControl());
//  //  缩放控件
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
</script>
</body>
</html>

ann0302

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图入门

百度地图地址：http://developer.baidu.com/map/ 注册百度开发者账户：http://developer.baidu.com/首先，使用API要申请密钥下面介绍一下为百度地图添加控件的方法1 、Control类—–控件类（1）ScaleControl类——表示比例控件构造器为ScaleControl()方法：setUnit()—-设...
复制链接

扫一扫