Insert Baidu Map in Web page
If you want to add Baidu map on your own page, you can use the Baidu Map API. Use the following methods:
The first step: Enter Baidu to create a map of the site http://api.map.baidu.com/lbsapi/creatmap/, search out the location you want to show, as shown.
The second step: set the map, you can set the site to display the width of the map, the remaining options do not move.
Step three: Add a callout. After clicking on the first icon, locate your location on the right and click the left mouse button to locate it. Change icon shape, name and comment to fill in location-related information at the marker icon.
Fourth step: Get the code. Pasting the code into your Web page will be OK. The code is as follows:
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>"><HTMLxmlns= "<a href="http://www.w3.org/1999/xhtml ">Http://www.w3.org/1999/xhtml</a>"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" /><Metaname= "keywords"content= "Baidu map, Baidu Map API, Baidu Map Customization Tool, Baidu Map WYSIWYG tool" /><Metaname= "description"content= "Baidu Map API custom map to help users generate Baidu map under the visual operation" /><title>Baidu Map API Custom Map</title><!--quote Baidu Map API -<styletype= "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><Scripttype= "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 -<Divstyle= "Width:697px;height:550px;border: #ccc solid 1px;"ID= "Ditucontent"></Div></Body><Scripttype= "Text/javascript">//To Create and initialize a map function:functionInitmap () {createmap ();//Create a mapsetmapevent ();//Set Map EventsAddmapcontrol ();//adding controls to a map}//To Create a map function:functionCreatemap () {varMap= NewBmap.map ("ditucontent");//Create a map in the Baidu map containervar Point= NewBmap.point (113.116257,27.822879);//Define a center point coordinateMap.centerandzoom (Point, -);//set the center point and coordinates of the map and display the map in the map containerWindow.map=map;//store the map variable in the global}//Map Event Settings function:functionsetmapevent () {map.enabledragging ();//Enable map drag events, enabled by default (can not be written)map.enablescrollwheelzoom ();//Enable map wheel zoom in and zoom outmap.enabledoubleclickzoom ();//enable mouse double-click to enlarge, enabled by default (can not write)Map.enablekeyboard ();//enable keyboard to move the map up or down}//Add a function to the map control:functionAddmapcontrol () {//Add a zoom control to a mapvarCtrl_nav= NewBmap.navigationcontrol ({anchor:bmap_anchor_top_left,type:bmap_navigation_control_large}); Map.addControl ( CTRL_NAV);//add a thumbnail control to your mapvarCtrl_ove= NewBmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:1}); Map.addcontrol (ctrl_ove);//Add a scale bar control to a mapvarCtrl_sca= NewBmap.scalecontrol ({anchor:bmap_anchor_bottom_left}); Map.addcontrol (CTRL_SCA);} Initmap ();//Creating and initializing maps</Script></HTML>Source: http://www.jb51.net/web/162032.html
Page embed Baidu map and use Baidu Map API to customize the map with detailed steps
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
