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, ...
[HTML]View PlainCopy
- <script type="Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= (Baidu API Key, Free to apply) "></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= "farm Stay" < span class= "attribute" >style= "border-left: solid 1px #e4e4e4;" > Farm music </li>
- <li val_class="Snack" style="Border-left:solid 1px #e4e4e4;" > Special 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 Baidu location pickup system to get http://api.map.baidu.com/lbsapi/getpoint/index.html
- var search= ' scenic spot ';
- var Mymarker;
- Baidu Map API Features
- $ (function () {
- map = new Bmap.map ("Allmap");
- GetLocation ();
- var mpoint = new Bmap.point (Lng,lat);
- var myicon = new Bmap.icon ("Marker 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 '). each (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);
- });
- /**
- * Get round the inner-connected square bounds
- * @param the center of the circle range of {point} Centerpoi
- * radius of @param {number} R circle range
- * @return No return value
- */
- function Getsquarebounds (centerpoi,r) {
- var a = math.sqrt (2) * r;//square side length
- 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 are obtained according to 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, 16);
- 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>
- </html>
Baidu API get location-wide perimeter services
