大纲

基础API
地图技术概述

地图应用场景





常用地图服务的比较
百度地图
官网: https://map.baidu.com/ 开发平台: https://lbsyun.baidu.com/
高德地图
官网: https://www.amap.com/ 开发平台: https://lbs.amap.com/
腾讯地图
官网:https://map.qq.com/ 开放平台:https://lbs.qq.com/
搜狗地图
官网: http://map.sogou.com/ 开放平台:http://map.sogou.com/api/
百度地图基本API
百度地图提供了各种平台的SDK,地址:https://lbsyun.baidu.com/ 如下:

账户和API准备

设置应用名称与类型
输入应用名称以及应用类型。
这里先选择浏览器端进行学习。
白名单中设置“*”号,说明没有域名限制。


创建完成,获取到AK

创建Maven项目

编写代码
创建地图的基本步骤如下:
编写HTML页面的基础代码
引入百度地图API文件
初始化地图逻辑以及设置各种参数
参考官方文档:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
案例—展示地图
<!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>
</head>
<body>
<div id="container">
<p>百度地图</p>
</div>
</body>
</html>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=自己的AK"></script>
<script>
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>
百度地图web API应用
百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScript、C#、C++、Java等语言的地图应用。
地址: https://lbsyun.baidu.com/index.php?title=webapi

创建web类型应用


坐标转换
目前中国主要有以下三种坐标系:
WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系
GCJ02:是由中国国家测绘局制订的地理信息系统的坐标系统,由WGS84坐标系经加密后的坐标系
BD09:为百度坐标系,在GCJ02坐标系基础上再次加密,其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标
Web api中提供了将非百度坐标转换成百度坐标体系的接口服务。
文档:https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
IP定位服务
普通IP定位是一套以HTTP/HTTPS形式提供的轻量级定位接口,用户可以通过该服务,根据IP定位来获取大致位置。
文档:https://lbsyun.baidu.com/index.php?title=webapi/ip-api

通过获取得到北京市的JSON坐标数据
{"address":"CN|\u5317\u4eac\u5e02|\u5317\u4eac\u5e02|None|None|100|99","content":{"address":"\u5317\u4eac\u5e02","address_detail":{"adcode":"110000","city":"\u5317\u4eac\u5e02","city_code":131,"district":"","province":"\u5317\u4eac\u5e02","street":"","street_number":""},"point":{"x":"116.41338370","y":"39.91092455"}},"status":0}
进行JSON数据格式化
{ "address": "CN|北京市|北京市|None|None|100|99", "content": { "address": "北京市", "address_detail": { "adcode": "110000", "city": "北京市", "city_code": 131, "district": "", "province": "北京市", "street": "", "street_number": "" }, "point": { "x": "116.41338370", "y": "39.91092455" } }, "status": 0 }

地点输入提示服务
用户可通过该服务,匹配用户输入关键词的地点推荐列表。
文档:地点检索 | 百度地图API SDK


路线规划
路线规划服务(又名Direction API)是一套REST风格的Web服务API,以HTTP/HTTPS形式提供了路线规划服务。目前,Direction API支持公交、骑行、驾车路线规划,Direction API支持中国大陆地区。
文档:https://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2

完整测试用例代码
package cn.itcast.baidumap;
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import org.junit.Test;
public class TestBaiduWebApi {
private String ak = "自己的AK";
/**
* 测试坐标转换服务
*/
@Test
public void testGeoconv() {
String url = "https://api.map.baidu.com/geoconv/v2/?coords=114.21892734521,29.575429778924&model=1&ak={}";
url = StrUtil.format(url, ak);
//发起get请求
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
/**
* 测试IP定位服务
*/
@Test
public void testLocation(){
String url = "https://api.map.baidu.com/location/ip?ip=111.206.214.37&coor=bd09ll&ak={}";
url = StrUtil.format(url, ak);
//发起get请求
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
/**
* 测试地点输入提示服务
*/
@Test
public void testSuggestion(){
String url = "https://api.map.baidu.com/place/v2/suggestion?query=黔东®ion=贵州&city_limit=true&output=json&ak={}";
url = StrUtil.format(url, ak);
//发起get请求
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
/**
* 测试路线规划
*/
@Test
public void testDriving(){
String url = "https://api.map.baidu.com/direction/v2/driving?origin=40.01116,116.339303&destination=39.936404,116.452562&ak={}";
url = StrUtil.format(url, ak);
//发起get请求
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
}
BMapGLLib
BMapGLLib是基于百度地图JSAPI GL版的JavaScript开源工具库。
代码地址:https://github.com/huiyan-fe/BMapGLLib

地图找房案例
在房源信息类网站中,为了方便用户查找房源,推出了地图找房的功能,房源数据展示更加的直观。
例如:链家网:https://map.lianjia.com/map/310000/ESF/
功能特点:
在可视范围内展现房源数据。
在地图缩放或拖拽时,重新查询房源数据。
不同的地图比例尺聚合展现的数据维度不同,例如:按照行政区、按商圈、按小区名等。
2180

被折叠的 条评论
为什么被折叠?



