当前位置：网站首页>Overview of Baidu map technology, and application development of basic API and webapi
Overview of Baidu map technology, and application development of basic API and webapi
2022-07-27 18:50:00 【Fantasia of the cat】
Overview of map technology ：
Map application scenario ：
Online car Hailing industry ：
Smart wearable products ：
Intelligent logistics network industry ：
Intelligent scenic spot industry ：
Internet of vehicles industry ：
Comparison of common map manufacturers in China ：
Baidu map basic API application ：
Baidu map provides various platforms SDK, Address ：https://lbsyunbaidu.com/ as follows ：
Set the application name and type of the test ：
1. Create map ：
The basic steps of creating a map are as follows ：
- To write HTML The basic code of the page
- Introduce Baidu map API file
- Initialize map logic and set various parameters
Refer to official documentation ：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
2. add controls ：
Control is responsible for interacting with the map UI Elements , Baidu Maps API Support scale 、 The zoom 、 location 、 City selection list 、 Copyright , And custom controls .
file ：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
<!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= Their own ak value "></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // Create a map instance
var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates
map.centerAndZoom(point, 15); // Initialize map , Set center point coordinates and map level
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
map.setHeading(64.5); // Set the map rotation angle
map.setTilt(70); // Set the tilt angle of the map
var scaleCtrl = new BMapGL.ScaleControl(); // Add scale bar control
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // Add a zoom control
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // Add city list control
map.addControl(cityCtrl);
</script>
</body>
</html>3. Add cover ：
All the content superimposed or overlaid on the map , We collectively call it map coverage . The cover has its own geographic coordinates , When you drag or zoom the map , They move accordingly . at present JSAPI GL The overlay supported by the version is mainly basic graphics .
file ：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
<!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 - mulch </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= Their own ak value "></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // Create a map instance
var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates
map.centerAndZoom(point, 15); // Initialize map , Set center point coordinates and map level
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
// var marker = new BMapGL.Marker(point); // Create annotations
// map.addOverlay(marker); // Add annotations to the map
var myIcon = new BMapGL.Icon("logo.png", new BMapGL.Size(180, 53), {
// Specify the positioning position .
// When labels are displayed on the map , The geographical location it points to is at the top left of the distance icon
// Angular offset 10 Pixels and 25 Pixels . You can see that in this case, the location is
// The sharp corner at the lower end of the center of the icon .
anchor: new BMapGL.Size(10, 25),
// Set picture offset .
// When you need to capture a part from a larger picture as a label icon , you
// You need to specify the offset position of the large drawing , This practice is similar to css sprites Technology is similar .
imageOffset: new BMapGL.Size(0, 0 - 25) // Set picture offset
});
// Create dimension objects and add them to the map
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
marker.addEventListener("click", function(){
alert(" You clicked the label ");
});
// Broken line
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);
// polygon
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);
// circular
var circle = new BMapGL.Circle(point,1000,{
strokeColor:"red",
strokeOpacity:0.8,
strokeWeight:3
});
map.addOverlay(circle);
</script>
</body>
</html>4. Map Events ：
Baidu Maps API Have your own event model , Programmers can monitor maps API Object , Usage and DOM Similar events . But please pay attention to API Events are independent , With the standard DOM Different events .
file ：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/event
<!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 - event </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= Their own ak value "></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // Create a map instance
var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates
map.centerAndZoom(point, 15); // Initialize map , Set center point coordinates and map level
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
// map.addEventListener('click', function(e) {
// alert('click!')
// });
map.addEventListener('click', function(e) {
alert(' Click the latitude and longitude ：' + e.latlng.lng + ', ' + e.latlng.lat);
var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
alert(' Mercator coordinates of points ：' + mercator[0] + ', ' + mercator[1]);
});
</script>
</body>
</html>5. Map style ：
Baidu map supports setting map styles , For example, set the map to earth mode ,
file ：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/maptype
<!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 - style </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= Their own ak value "></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // Create a map instance
var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates
map.centerAndZoom(point, 15); // Initialize map , Set center point coordinates and map level
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
map.setMapType(BMAP_EARTH_MAP); // Set the map type to earth mode
</script>
</body>
</html>6. Map Retrieval ：
Baidu map supports the search service of interest points in the map , Example ：
https://lbsyun.baidu.com/jsdemohtm#localSearchKey
<!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 - Search for </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= Their own ak value "></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // Create a map instance
var point = new BMapGL.Point(116.404, 39.915); // Create point coordinates
map.centerAndZoom(point, 15); // Initialize map , Set center point coordinates and map level
map.enableScrollWheelZoom(true); // Turn on mouse wheel zoom
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(' Scenic spot ',point,1000);
</script>
</body>
</html>7. Data visualization ：
MapVGL, It's based on WebGL Geographic information visualization library , Can be used to show a large number of 3D Geographic information point, line and surface data .
file ：https://lbsyun.baidu.com/solutions/mapvdata
Baidu Maps web API application ：
Baidu Maps Web service API For developers http/https Interface , That is to say, developers use http/https Form to initiate a search request , Get back to json or xml Format of the retrieval data . Users can develop based on this JavaScript、C#、C++、Java Map application in other languages .
Address ：https://lbsyun.baidu.com/index.php?title=webapi
 |  |  |
establish web Type application ：
1. Coordinate transformation
At present, China mainly has the following three coordinate systems ：
- WGS84: For a geodetic coordinate system , It is also widely used at present GPS The coordinate system used by GPS
- GCJ02： It is the coordinate system of geographic information system formulated by the State Bureau of Surveying and mapping of China , from WGS84 The encrypted coordinate system
- BD09： For Baidu coordinate system , stay GCJ02 The coordinate system is encrypted again , among bd09ll Indicates Baidu latitude coordinates ,bd09mc Represents Baidu Mercator metric coordinates
Web api Provides an interface service for converting non Baidu coordinates into Baidu coordinate system .
file ：https://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
private String ak = " Your own ak value ";
/**
* Test coordinate conversion service
*/
@Test
public void testGeoconv(){
String url = "https://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak={} ";
url = StrUtil.format(url,ak);
// launch get request
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
2.IP Location services ：
Ordinary ip Positioning is a set of HTTP/HTTPS Form of lightweight positioning interface , Users can use this service , according to IP Locate to get the approximate position .
file ：https://lbsyun.baidu.com/index.php?title=webapi/ip-api
/**
* test ip location
*/
@Test
public void testLocation(){
String url = "https://api.map.baidu.com/location/ip?ak={}&ip=140.206.149.83&coor=bd09ll ";
url = StrUtil.format(url,ak);
// launch get request
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
} 
3. Place input prompt service ：
Users can use this service , The recommended list of places that match the keywords entered by the user .
file ：https://lbsyun.baidu.com/index.php?title=webapi/place-suggestion-api
/**
* Test location input prompt service
*/
@Test
public void testSuggestion(){
String url = "https://api.map.baidu.com/place/v2/suggestion?query= Tsinghua University ®ion= Beijing &city_limit=true&output=json&ak={}";
url = StrUtil.format(url,ak);
// launch get request
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}4. Route planning ：
Route planning services （ also called Direction API） It's a set REST Style Web service API, With HTTP/HTTPS Form provides route planning services , at present ,Direction API Support public transport 、 Riding 、 Driving route planning ,Direction API Support Chinese Mainland .
file ：https://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2
/**
* Test route planning
*/
@Test
public void testDriving(){
String url = "https://api.map.baidu.com/direction/v2/driving?alternatives=0&origin=40.009645,116.333374&destination=39.937016,116.453576&ak={}";
url = StrUtil.format(url,ak);
// launch get request
String body = HttpRequest.get(url).execute().body();
System.out.println(body);
}
Basic of Baidu map API Use and WebApi Application example .
documentation , And for reference .
边栏推荐
- Class not found: "the com.parkmanagement.dao.daotest test cannot find the test class
- ridis命令笔记
- Uniapp has no effect on the page selector on the app side
- Have you ever stumbled on MySQL's order by
- 10 SQL optimization schemes summarized by Alibaba P8 (very practical)
- 机器学习分类任务效果评估指标大全（包含ROC和AUC）
- JS to achieve smooth scrolling of pages or DOM elements
- Use ETL tools for data migration in salesforce project
- 2021.8.1 notes DBA
- 2021.7.19 notes DML
猜你喜欢
2021.7.18 notes MySQL data type
Login page tablelayout
Ant privacy computing innovation tee technology has won academic recognition
Uni app traversal array rendering data vertical rendering
虚拟偶像的歌声原来是这样生成的！
I was forced to optimize the API gateway query interface
订单超时取消 及 按类别查询商品
2021.8.6 notes jsoup
"MySQL things" explains the indexing principle in detail
LED学习护眼台灯触摸芯片-DLT8T10S-杰力科创
随机推荐
个人中心--订单业务流程
Jianmu continuous integration platform v2.5.2 release
电动加热护颈枕芯片-DLTAP703SC
2021.7.22 note constraints
Labels such as {@code}, {@link} and ＜ P > in the notes
2 万字 + 30 张图 ｜ 细聊 MySQL undo log、redo log、binlog 有什么用？
LED带风扇护眼学习台灯触摸芯片-DLT8S12A
Infrared hyperspectral survey
mysql视图基本操作
MySQL learning day3 multi table query / transaction / DCL
MySQL learns the relationship between Day2 Sorting Query / aggregation function / grouping query / paging query / constraint / multiple tables
内网的公司邮箱服务器怎么发外部邮件
Filebeat.yml configuration file about the configuration of multiple services
2021.7.17 notes MySQL other commands
飞机大战英雄出场加子弹实现
Was not registered for synchronization because synchronization is not active[resolved]
百度地图鹰眼轨迹服务
虚拟偶像的歌声原来是这样生成的！
机器学习——SVM训练集只有一类标签数据而引发的错误
idea 2020.1社区版下载体验