Search for recommendations in the Baidu map drop-down box, and add annotation points automatically.

Search for recommendations in the Baidu map drop-down box, and add annotation points automatically.

HTML code (MVC)

@ * ------------------- Add the automatic search (region) Box -------------------------------------------- * @ {Layout = null;} <script src = "~ /Scripts/jquery-1.8.2.min.js "> </script> <script type =" text/javascript "src =" http://api.map.baidu.com/api? V = 2.0 & ak = CGkMErD3Gux07tGL26GCoWGU "> </script> @ * search box * @ <div style =" margin: 50px "> enter: <input type = "text" id = "suggestId" size = "30" placeholder = "search region," style = "width: 300px; "/> </div> @ * search result * @ <div id =" searchResultPanel "style =" border: 1px solid green; width: 300px; height: 600px; position: absolute; left: 650px; top: 20px; "> </div> @ * Add a map * @ <div id =" container "> </div>

JS Code

<Script type = "text/javascript"> // initialize map var map = new BMap. map ("container"); // create a Map var point = new BMap In the Baidu Map container. point (116.3964, 39.9093); // defines a central Point coordinate map. centerAndZoom (point, 5); // sets the center and coordinates of the map and displays the map in the map container. enableScrollWheelZoom (); // allows the mouse pulley to zoom in or out var ac = new BMap. autocomplete (// create an automatically completed object {"input": "suggestId", "location": map}); function G (id) {return document. getElementById (id);} ac. addEventListener ("onhighlight", function (e) {// event var str = ""; var _ value = e. fromitem. value; var value = ""; if (e. fromitem. index>-1) {value = _ value. province + _ value. city + _ value. district + _ value. street + _ value. business;} str = "FromItem <br/> index =" + e. fromitem. index + "<br/> value =" + value; value = ""; if (e. toitem. index>-1) {_ value = e. toitem. value; value = _ value. province + _ value. city + _ value. district + _ value. street + _ value. business;} str + = "<br/> ToItem <br/> index =" + e. toitem. index + "<br/> value =" + value; G ("searchResultPanel "). innerHTML = str ;}); var myValue; ac. addEventListener ("onconfirm", function (e) {// click the event var _ value = e after the drop-down list. item. value; myValue = _ value. province + _ value. city + _ value. district + _ value. street + _ value. business; G ("searchResultPanel "). innerHTML = "onconfirm <br/> index =" + e. item. index + "<br/> myValue =" + myValue; setPlace () ;}); function setPlace () {// create an address parser instance var myGeo = new BMap. geocoder (); // display the address resolution result on the map, and adjust the map field of view myGeo. getPoint (myValue, function (point) {if (point) {map. centerAndZoom (point, 9); // reposition the map center point map. addOverlay (new BMap. marker (point); // create a map annotation }}, "Beijing ");} </script> <style type = "text/css"> body {font-size: 13px; margin: 0px ;}# container {width: 600px; height: 400px ;}. label {margin-left: 20px; font-weight: bold; font-size: 14px;} </style>