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> <!--Quote Baidu Map API--> <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> <!--Baidu map container--> <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
Recommend
Detailed explanation of Vue custom instructions and their use
Table of contents 1. What is a directive? Some co...
CSS implements Google Material Design text input box style (recommended)
Hello everyone, today I want to share with you ho...
Corporate website and column dictionary Chinese and English comparison Friends who make Chinese and English bilingual corporate websites need
name character name character information news te...
Summary of MySQL Undo Log and Redo Log
Table of contents Undo Log Undo Log Generation an...
Mybatis implements SQL query interception and modification details
Preface One of the functions of an interceptor is...
How to migrate local mysql to server database
We can use the scp command of Linux (scp cannot b...
HTML table markup tutorial (39): The bright border color attribute of the header BORDERCOLORLIGHT
In the table header, you can define the light bor...
mysqldump parameters you may not know
In the previous article, it was mentioned that th...
CSS to achieve the like card effect in the lower right corner of the web page (example code)
Effect To implement HTML, first prepare a clean H...
Basic usage of UNION and UNION ALL in MySQL
In the database, both UNION and UNION ALL keyword...
Detailed installation history of Ubuntu 20.04 LTS
This article records the creation of a USB boot d...
JavaScript regular verification password strength implementation method
exhibit design Password strength analysis The pas...
MYSQL string forced conversion method example
Preface Since the types of the same fields in the...
How to try to add sticky effect to your CSS
Written in front I don’t know who first discovere...
Analysis of the Principles of MySQL Slow Query Related Parameters
MySQL slow query, whose full name is slow query l...