For the site or Web page insert Baidu Map plug-in, may be many programmers know how to do, but it takes a long time to do, then the following share with you how to quickly call Baidu Map API, a way to generate Baidu map, this method for any programming language, So interested programmers can save a bit.
The source code between the body is as follows:
<script type= "Text/javascript" src= "Http://api.map.baidu.com/api?key=&v=1.1&services=true" ></ Script>
<div id= "Map" class= "Map_cont" style= "width:600px;height:400px" ></div>
<script type= "Text/javascript" >//Create and initialize map functions: function Initmap () {createmap ();//Create Map Setmapeven t ();//Set Map event Addmapcontrol ();//Add control to map Addmarker ();//Add marker} to map//create Map function: function Createmap () {var map = new Bmap.map ("map");//Create a map in the Baidu map container var point = new Bmap.point (113.610508, 34.766151);//define a center Coordinates map.centerandzoom (point, 18);//sets the center and coordinates of the map and displays the map in the map container Window.map = map;//stores the map variable in the global}//Maps event Setup function: function Setmapevent () {map.enabledragging ();//enable map drag events, enabled by default (can not be written) map.enablescrollwheelzoom ();//Enable Map wheel Drop Large reduction 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///Map Control Add function : function Addmapcontrol () {//Add zoom control to 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 a 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); }//Callout group var Markerarr = [{title: What What Network Technology Co., Ltd.], content: "Address: Zhengzhou Zhongyuan District Tiger North Road 10-2, Newton, 5 floor, 503 room <br/> Tel: 025-85615899 ", point:" 113.610508|34.766151 ",//point:" 118.762938|32.069151 ", isopen:0, 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 = Markerar R[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 icon = new Bmap.icon ("Http://app.baidu.com/map/images/us_mk_icon.jpg", 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) }) var iw = new Bmap.infowindow ("<b class= ' iw_poi_title ' title= '" + Json.title + ">" + json.title + "</b& Gt;<div class= ' iw_poi_content ' > "+ json.content +" </div> "); return IW; }//Create an icon function Createicon (JSON) {} initmap ();//Create and initialize maps </script> believe that after trying, you programmers have seen the effect, if Have any good ideas, can comment in the comments section below, we progress together.
This article by professional do app development, small program development, website construction of Zhengzhou Brigitte Xuan Software technology published, if need reprint please indicate the original author and source!
Baidu Map API Quick Call, a key to generate Baidu map