//Universal Package Good JS:varMap =NewBmap.map ("Container");//Achievements Map ExamplevarPoint =NewBmap.point (103.976032,33.845509);//Achievement Point coordinatesMap.centerandzoom (Point,6);//initializes the map, setting the center point coordinates and the map level. //Map Event Settings function: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 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);//Create markerfunction Addmarker () { for(vari =0; i < markerarr.length; i++) { varJSON =Markerarr[i]; varP0 = Json.point.split ("|")[0]; varP1 = Json.point.split ("|")[1]; varPoint =NewBmap.point (P0, p1); varIconimg =Createicon (Json.icon); varMarker =NewBmap.marker (Point, {icon:iconimg}); Map.addoverlay (marker); }}//Create an iconfunction Createicon (JSON) {//To Create an icon object//var myicon = new Bmap.icon (".. /marker_red_sprite.png ", new Bmap.size (+), {// //Specifies the location of the anchor. // //When the callout is displayed on the map, it points to the top left of the geographic distance icon// //angles are offset by 10 pixels and 25 pixels. As you can see in this example, the position is// //the sharp corner position of the bottom of the icon. //offset:new Bmap.size (Ten),// //sets the picture offset. // //When you need to intercept a section from a larger picture as a callout icon, you// //you need to specify the offset position of the large image, which is similar to the CSS sprites technique. // //imageoffset:new bmap.size (0, 0-index *)//Set Picture offset//}); varicon =NewBmap.icon (picture name,NewBmap.size (JSON.W, Json.h), {imageoffset:NewBmap.size (-JSON.L,-json.t), Infowindowoffset:NewBmap.size (json.lb +5,1), offset:Newbmap.size (json.x, Json.h)}) returnicon;}Map.js
"Map.js"></script> <script type="Text/javascript">//declaring global arrays varMarkerarr = []; $ (function () {//Click Query to load annotations$("#btnSearch"). Click (function () {loadmap (); }); }); //Loading tourist Locationsfunction Loadmap () {//empty array and all callout pointsMarkerarr = []; Map.clearoverlays (); varPar={startdate:$ ("#startDate"). Val (), enddate:$ ("#endDate"). Val ()} $.ajax ({type:"Get", URL:"/visitorclient/getallinfo", Data:par, DataType:"JSON", Cache:false, Success:function (r) {if(r.res) {dataBind (R); $("#spannum"). Text ("the number of visitors to the app Park during this period is:"+r.count); } Else { $("#spannum"). Text ("no one in the park uses the app at this time"); }}, Error:function (d) {alert (d.respons EText); } }); } function DataBind (r) {$.map (R.data, function (d) {vararr = {point:""+ D.longitude +"|"+D.latitude}; Markerarr.push (arr); }); Addmarker (); }</script> <body> <input type="Button"Value="Search"Id="btnsearch"/> </body>Get Database DataStart 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
