Baidu Map API is a set of free for developers based on the Baidu map of the application interface, including JavaScript, IOS, andriod, static maps, Web services and many other versions, providing basic maps, location search, peripheral search, ...
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= (Baidu API Key, can be applied for free)" ></ Script><style type= "Text/css" >body,html, #allmap {width:100%;height:100%;overflow:hidden;margin:0;} #allmap {margin-top:35px;} #golist {display:none;} @media (max-device-width:780px) {#golist {display:block!important;}}. Tuijian_listbox1 {position:fixed;background: #fff; height:35px;top:0px;left:0px;width:100%;} Ul.tuijian_list2 li {width:24%;height:35px;float:left;text-align:center;line-height:35px;} </style><body><div class= "Tuijian_listbox1" ><ul class= "Tuijian_list2" ><li val_class= " Attractions "> Attractions </li><li val_class=" accommodation "style=" border-left:solid 1px #e4e4e4; " > Accommodation </li><li val_class= "style=" Border-left:solid 1px #e4e4e4; > Farm </li><li val_class= "snacks" style= "border-left:solid 1px #e4e4e4;" > Specialty Snacks </li></ul></div><div class= "map" id= "Allmap" ></div><script type= "text/ JavAscript ">var map;var bounds;var circle;var local;var lng= ' 118.792255 '; var lat= ' 32.047475 ';// Longitude latitude of the specified location can go to the Baidu location pickup system to get Http://api.map.baidu.com/lbsapi/getpoint/index.htmlvar search= ' scenic Area '; var mymarker;// Baidu Map API function $ (function () {map = new Bmap.map ("Allmap"); GetLocation (); var mpoint = new Bmap.point (Lng,lat), var myicon = new Bmap.icon ("Mark arrow icon path", New Bmap.size (18,28)); Mymarker = new Bmap.marker (Mpoint,{icon:myicon}); Map.enablescrollwheelzoom (); Map.centerandzoom (mPoint,15); Map.addoverlay (Mymarker); Map.addeventlistener ("Click", Function (e) {map.removeoverlay (mymarker); mpoint = new Bmap.point (E.point.lng,e.point.lat); Mymarker = new Bmap.marker (Mpoint,{icon:myicon}); Map.addoverlay (Mymarker); Search (Search,mpoint);}); $ ('. Tuijian_list2 li '). (function (index) {$ (this). "Click (function () {$ (this). Parents ('. Tuijian_list2 '). Find ('. Tuijian_in '). Removeclass (' tuijian_in '); $ (this). addclass ("tuijian_in"); search = $ (this). attr (' Val_class '); Search (Search,mpoint); });}); Search (Search,mpoint); });/** *To the circle of the inner square bounds * @param {point} Centerpoi Circle Circle Center * @param {Number} R circular Range radius * @return no return value */function getsquarebounds (CENTERPOI,R) {var a = MATH.SQRT (2) * r;//square side long var mpoi = Getmecator (Centerpoi); var x0 = mpoi.x, y0 = MPOI.Y; var x1 = x0 + a/2, y1 = y0 + a/2;//Northeast point var x2 = x0-a/2, y2 = y0-a/2;//Southwest point var ne = getpoi (new Bmap.pixel (x1, y1)), SW = Getpoi (new Bmap.pixel (x2, y2)); return new Bmap.bounds (SW, NE); };//the plane coordinates according to the spherical coordinates. function Getmecator (POI) {return Map.getmaptype (). getprojection (). Lnglattopoint (POI);}; The spherical coordinates are obtained according to the plane coordinates. function Getpoi (mecator) {return Map.getmaptype (). getprojection (). Pointtolnglat (mecator);}; function Search (search,mpoint) {map.clearoverlays (); circle = new Bmap.circle (mpoint,1000,{stroke: "White", Strokeweight:1, fillopacity:0.3, strokeopacity:0.3}); Map.addoverlay (circle); Local = new Bmap.localsearch (map, {renderoptions: {map:map, Autoviewport:false}}); Bounds = Getsquarebounds (Circle.getcenter (), CirCle.getradius ()); Local.searchinbounds (Search,bounds); Map.addoverlay (Mymarker); /*map.centerandzoom (Mpoint, +); var local = new Bmap.localsearch (map, {renderoptions: {map:map, Panel: "R-result"}}); Local.search (search); */};function GetLocation () {var geolocation = new Bmap.geolocation (); Geolocation.getcurrentposition (function (r) {if (this.getstatus () = = bmap_status_success) {LNG = R.point.lng;lat = R.point.lat;} Else{alert (' failed ' +this.getstatus ());} },{enablehighaccuracy:true}); </script></body>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Baidu API get location-wide perimeter services
Start 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
