Insert Baidu Map (example) in a webpage

Source: Internet
Author: User

Method/Step
    1. Enter: http://dev.baidu.com/wiki/static/map/API/tool/creatMap/(Create map-Baidu map API WYSIWYG tools, Baidu's official address, we are relieved to use)
    2. Switch cities, the search needs to label the location. (e.g.:)

    3. Set up a map: You can set the width of the site display map, the remaining options do not move.

    4. Add annotations: After clicking on the first icon, find 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. (e.g.:)

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

    6. Get the code as follows: (note: Usually we just insert the following code in the Web page, the bug is marked out, the rest can not be used.) )

      1. Insert the following code between <!--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= "Http://api.map.baidu.com/api?key=&v=1.1&services=true" ></ Script>

      2. Place the following code in <body></body> between the locations where the map is to be displayed: (The 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 (you can actually place it anywhere on the page.) )
      <script type= "Text/javascript" >
      To create and initialize a map function:
      function Initmap () {
      Createmap ();//Create a map
      Setmapevent ();//Set Map events
      Addmapcontrol ();//Add controls to the map
      Addmarker ();//Add marker to the map
      }

      To 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 (115.949652,28.693851);//define a center 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;//Stores the map variable in the global
      }

      Map Event Settings function:
      function Setmapevent () {
      Map.enabledragging ();//enable map drag events, enabled by default (can not be written)
      Map.enablescrollwheelzoom ();//enable map wheel Zoom Out
      Map.enabledoubleclickzoom ();//enable mouse double-click to zoom in, enabled by default (can not write)
      Map.enablekeyboard ();//enable keyboard to move the map up or down
      }

      Add a function to the map control:
      function Addmapcontrol () {
      Add a zoom control to a 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 your map
      var ctrl_ove = new Bmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:1});
      Map.addcontrol (Ctrl_ove);
      Add a scale bar control to a map
      var Ctrl_sca = new Bmap.scalecontrol ({anchor:bmap_anchor_bottom_left});
      Map.addcontrol (CTRL_SCA);
      }

      Callout Points Group
      var Markerarr = [{title: "Hundred-constant 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 maps
      </script>

      Of course, if you want to lazy, will be above the corresponding code all in the <body></body> room is no problem, hehe.

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.