Baidu Map API Quick Call, a key to generate Baidu map

Source: Internet
Author: User

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

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.