How to display a map on a web page using JS and Baidu Maps

<div id="map"></div>

Set the style of the map container in the CSS file ：

#map {
  width: 800px;
  height: 500px;
}

3. Initialize the map object

Create a map object in the JS file and specify its default zoom level and center point location. The code is as follows:

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); //中心点位置
map.centerAndZoom(point, 12); //设置地图中心点和默认的缩放级别

The BMap here is an object provided by Baidu Map API, through which maps and various map functional components can be created.

4. Add map controls

Add some commonly used controls on Baidu Map, such as zoom controls, map type controls, eagle eye controls, etc. The code is as follows:

map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加鹰眼控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

5. Add overlays and labels

Adding custom overlays and labels on the map can be achieved through the related objects of BMap. For example, add a custom annotation:

var marker = new BMap.Marker(point); //创建一个标注
map.addOverlay(marker); //将标注添加到地图中

6. Bind map events

When using a map, you often need to bind some events to respond to user operations. For example, when the user clicks on the map, a label is added to the map. The code is as follows:

map.addEventListener("click", function(e) {
  var marker = new BMap.Marker(e.point); //创建一个标注
  map.addOverlay(marker); //将标注添加到地图中
});

7. Geocoding and reverse geocoding

Geocoding and reverse geocoding are important functions in the map API. Geocoding is the process of converting textual addresses into geographical coordinates, while reverse geocoding is the process of converting geographical coordinates into textual addresses. The code example is as follows:

//地理编码
var geocoder = new BMap.Geocoder();
geocoder.getPoint("北京市海淀区中关村", function(point) {
  //在地图上添加一个标注
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
}, "北京市");

//逆地理编码
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs) {
  var addComp = rs.addressComponents;
  alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
});

The above is the basic process and common function implementation of using JS and Baidu Maps to display maps on a web page. Through these code examples, I believe readers can quickly master the use of Baidu Map API, and then develop richer and more practical map applications.

The above is the detailed content of How to display a map on a web page using JS and Baidu Maps. For more information, please follow other related articles on the PHP Chinese website!