Detailed steps for embedding Baidu Maps in web pages and using Baidu Maps API to customize maps

Insert Baidu Map into the web page

If you want to add Baidu Maps to your own web page, you can use the Baidu Maps API. The specific usage is as follows:

Step 1: Go to Baidu's map creation website http://api.map.baidu.com/lbsapi/creatmap/ and search for the location you want to display, as shown in the figure below.

Step 2: Set the map. You can set the width and height of the map displayed on the website, and keep the other options unchanged.

Step 3: Add annotations. After clicking the first icon, find your position on the right and click the left mouse button to locate it. The shape of the mark icon can be changed, and the name and notes can be filled in with location-related information.

Step 4: Get the code. Just paste the code into your web page. The code is as follows:

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="Baidu Map, Baidu Map API, Baidu Map customization tool, Baidu Map WYSIWYG tool" />
<meta name="description" content="Baidu Map API custom map, helps users generate Baidu maps under visual operation" />
<title>Baidu Map API Custom Map</title>

<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>>
</head></p> <p><body>

<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//Create and initialize the map function:
function initMap(){
createMap(); //Create a map
setMapEvent(); //Set map event
addMapControl(); //Add controls to the map
}

//Create a map function:
function createMap(){
var map = new BMap.Map("dituContent"); //Create a map in the Baidu map container
var point = new BMap.Point(113.116257,27.822879); //Define a center point coordinate
map.centerAndZoom(point,17); //Set the center point and coordinates of the map and display the map in the map container
window.map = map; //Store the map variable globally
}

//Map event setting function:
function setMapEvent(){
map.enableDragging(); //Enable map dragging events, enabled by default (optional)
map.enableScrollWheelZoom(); //Enable the map scroll wheel to zoom in and out
map.enableDoubleClickZoom(); //Enable mouse double-click zoom, enabled by default (optional)
map.enableKeyboard(); //Enable the up, down, left, and right keys on the keyboard to move the map
}

//Map control add function:
function addMapControl(){
//Add a zoom control to the map
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//Add a thumbnail control to the map
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//Add a scale control to the map
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap(); //Create and initialize the map
</script>
</html>

<<: Using VMware IOInsight to perform refined virtual machine storage performance monitoring

>>: Font Treasure House 50 exquisite free English font resources Part 1

How to use vs2019 for Linux remote development

Detailed steps for embedding Baidu Maps in web pages and using Baidu Maps API to customize maps

How to use vs2019 for Linux remote development

Design a simple HTML login interface using CSS style

Analysis of the pros and cons of fixed, fluid, and flexible web page layouts

How to execute PHP scheduled tasks in CentOS7

Vue practice of preventing multiple clicks

Four categories of CSS selectors: basic, combination, attribute, pseudo-class

A brief analysis of the matching priority of Nginx configuration location

Solve the problem of using swiper plug-in in vue

Vue large screen data display example

Writing tab effects with JS

Recommend

JavaScript function call classic example code

Several ways to set the expiration time of localStorage

js realizes horizontal and vertical sliders

CSS3 transition rotation perspective 2d3d animation and other effects example code

Detailed explanation of using tcpdump command to capture and analyze data packets in Linux

Installation and configuration of mysql 8.0.15 under Centos7

Detailed example of removing duplicate data in MySQL

How to configure Basic Auth login authentication in Nginx

Detailed explanation of JavaScript timer and button effect settings

Vue custom instructions to achieve pop-up window drag four-side stretching and diagonal stretching effect

Detailed tutorial on installing Tomcat server and configuring environment variables on Win10 (picture and text)

Turn off the AutoComplete function in the input box

Two ways to connect WeChat mini program to Tencent Maps

Vue ElementUI Form form validation

A brief discussion on the principle of shallow entry and deep exit of MySQL