thinkphp integrated Baidu Map to obtain the latitude and longitude of the example

A recent project used latitude and longitude, according to the latitude and longitude of the map to show the corresponding position

Background implementation code:
HTML code:

The code is as follows

Copy Code

<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= 0A41212F4303EC4A6EF599E1D50551AD "></script> <div style= "Width:730px;margin:auto;" > Address to query: <input id= "text" type= "text" value= "style=" margin-right:100px; " Onkeyup= "Searchbystationname ();" /> Query results (latitude and longitude): <input id= "Result" type= "text"/> <div id= "Container" ></div> </div> CSS code: <style> #container {position:absolute; margin-top:30px; width:500px; height:500px; top:50; border:1px solid Gray;overflow:hidden;display:none;} </style> JS Code: <script type= "Text/javascript" > var map = new Bmap.map ("container"); Map.centerandzoom ("Beijing", 12); Map.enablescrollwheelzoom (); Enable wheel zoom out, default disabled Map.enablecontinuouszoom (); Enable map inertia drag, default disabled Map.addcontrol (New Bmap.navigationcontrol ()); Add default zoom translation control Map.addcontrol (New Bmap.overviewmapcontrol ()); Add default thumbnail map control Map.addcontrol (New Bmap.overviewmapcontrol ({isopen:true, anchor:bmap_anchor_bottom_right})); Lower right corner, open var localsearch = new Bmap.localsearch (map); Localsearch.enableautoviewport (); Allow the form size to be automatically adjusted function Searchbystationname () { Map.clearoverlays ()//Empty the original callout var keyword = document.getElementById ("text"). Value; Localsearch.setsearchcompletecallback (function (SearchResult) { var poi = searchresult.getpoi (0); document.getElementById ("Result"). Value = Poi.point.lng + "," + Poi.point.lat; Map.centerandzoom (Poi.point, 18); var marker = new Bmap.marker (new Bmap.point (POI.POINT.LNG, Poi.point.lat)); Create a callout that corresponds to the latitude and longitude of the place to be queried Map.addoverlay (marker); var content = document.getElementById ("text"). Value + "<br/><br/> Longitude:" + poi.point.lng + <br/> Latitude: "+ PO I.point.lat; var Infowindow = new Bmap.infowindow ("<p style= ' font-size:14px; ') > "+ content +" </p> "); Marker.addeventlistener ("click", Function () {This.openinfowindow (Infowindow);}); Marker.setanimation (bmap_animation_bounce); Bouncing animations }); Localsearch.search (keyword); } $ ("document"). Ready (function () { $ ("#text"). focus (function () { $ ("#container"). CSS ("Display", "block"); }); $ ("#text"). blur (function () { $ ("#container"). CSS ("display", "none"); }); }); </script>

============== Split Line ==============
Front-end Display code:

The code is as follows

Copy Code

<div class= "Contact-map" > <style type= "Text/css" > #allmap {width:100%;height:274px;border:1px solid #dedede; overflow:hidden;margin:0 auto; Background-color: #ffffff; margin-top:8px;} #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;} #r-result{height:100%;width:20%;float:left;} </style> <script src= "http://api.map.baidu.com/api?v=1.4" type= "Text/javascript" ></script> <!-------------map coordinates script end-----------> <div id= "Allmap" ></div> <script type= "Text/javascript" > var map = new Bmap.map ("Allmap"); Create a Map instance Map.addcontrol (New Bmap.navigationcontrol ()); Map.enablescrollwheelzoom (); var Myel = "{$info. jwd}"; latitude and longitude of--------------------------------------------> Background pickup var mya=myel.split (","); var point = new Bmap.point (mya[0], mya[1]); alert (Myel); Map.centerandzoom (Point, 18); var marker = new Bmap.marker (point); Create annotations Map.addoverlay (marker); Add annotations to the map Marker.setanimation (bmap_animation_bounce); Bouncing animations </script> <!--map--> </div>