Insert Baidu Map (example) in a webpage

Source: Internet
Author: User
1. Go to: http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ (Create a map-Baidu Map API WYSIWYG tool, Baidu official address, please rest assured)

2. Switch cities and search for marked locations. (Such as:)

3.Set the map: You can set the width and height of the map displayed on the website, and the rest of the options remain unchanged.

4.Add callouts: After clicking the first icon, find your position on the right and click the left mouse button to locate it. The shape of the icon can be changed at the mark icon, and the name and remarks can be filled in with relevant information. (Such as:)

5.After completing the above 4 steps, click Get Code.

6.The acquisition code is as follows: (Note: Usually we only need to insert the following code in the web page, the bug is marked out, and the rest can be omitted.)

1. Insert the following code between <head> </ head>: This is the style and JS script.
<!-Quoting 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 = "http://api.map.baidu.com/api?key=&v=1.1&services=true"> </ script>

2. Place the following code at the position where the map needs to be displayed between <body> </ body>: (this code calls the map)

 <!-Baidu Map Container->
 <div style = "width: 697px; height: 550px; border: #ccc solid 1px;" id = "dituContent"> </ div>

3. The following code is placed at the bottom of the page (actually, it can be placed anywhere on the page.)
<script type = "text / javascript">
   // Create and initialize map functions:
   function initMap () {
       createMap (); // Create a map
       setMapEvent (); // Set the map event
       addMapControl (); // Add a control to the map
       addMarker (); // Add a marker to the map
   }
   
   // Create map function:
   function createMap () {
       var map = new BMap.Map ("dituContent"); // Create a map in Baidu map container
       var point = new BMap.Point (115.949652,28.693851); // Define a center point coordinate
       map.centerAndZoom (point, 18); // Set the center point and coordinates of the map and display the map in the map container
       window.map = map; // Map variables are stored globally
   }
   
   // Map event setting function:
   function setMapEvent () {
       map.enableDragging (); // Enable map drag event, enabled by default (may not be written)
       map.enableScrollWheelZoom (); // Enable the map wheel to zoom in and out
       map.enableDoubleClickZoom (); // Enable double-click to zoom in by mouse, enabled by default (may not be written)
       map.enableKeyboard (); // Enable 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);
   }
   
   // label point array
   var markerArr = [{title: "Baiheng Network", content: "Phone: 0791-88117053 <br/> Mobile: 15079002975", point: "115.950312 | 28.693447", isOpen: 1, icon: {w: 23, h : 25, l: 46, t: 21, x: 9, lb: 12})
  ];
   // Create marker
   function addMarker () {
       for (var i = 0; i <markerArr.length; i ++) {
           var json = markerArr [i];
           var p0 = json.point.split ("|") [0];
           var p1 = json.point.split ("|") [1];
           var point = new BMap.Point (p0, p1);
  var iconImg = createIcon (json.icon);
           var marker = new BMap.Marker (point, (icon: iconImg));
  var iw = createInfoWindow (i);
  var label = new BMap.Label (json.title, {"offset": new BMap.Size (json.icon.lb-json.icon.x + 10, -20)});
  marker.setLabel (label);
           map.addOverlay (marker);
           label.setStyle ({
                       borderColor: "# 808080",
                       color: "# 333",
                       cursor: "pointer"
           });
  
  (function () {
   var index = i;
   var _iw = createInfoWindow (i);
   var _marker = marker;
   _marker.addEventListener ("click", function () {
       this.openInfoWindow (_iw);
      });
      _iw.addEventListener ("open", function () {
       _marker.getLabel (). hide ();
      })
      _iw.addEventListener ("close", function () {
       _marker.getLabel (). show ();
      })
   label.addEventListener ("click", function () {
       _marker.openInfoWindow (_iw);
      })
   if (!! json.isOpen) {
    label.hide ();
    _marker.openInfoWindow (_iw);
   }
  }) ()
       }
   }
   // Create InfoWindow
   function createInfoWindow (i) {
       var json = markerArr [i];
       var iw = new BMap.InfoWindow ("<b class = 'iw_poi_title' title = '" + json.title + "'>" + json.title + "</ b> <div class = 'iw_poi_content'>" + json .content + "</ div>");
       return iw;
   }
   // Create an Icon
   function createIcon (json) {
       var icon = new BMap.Icon ("http://map.baidu.com/image/us_cursor.gif", new BMap.Size (json.w, json.h), {imageOffset: new BMap.Size (-json .l, -json.t), infoWindowOffset: new BMap.Size (json.lb + 5,1), offset: new BMap.Size (json.x, json.h)))
       return icon;
   }
   
   initMap (); // Create and initialize the map
</ script>

   Of course, if you want to be lazy, it ’s okay to put the above corresponding code between <body> </ body>, haha

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.