The German map API learns to use-javascript__java

can refer to the official Website Instance Document study 1. The introduction of Map plug-in Gold map--Application key steps

2. Compile the map container (remember to give the container the highest forgiveness)

<div id= "Container" class= "col-md-9" style= "height:600px" ></div>
<div id= "Panel" class= "col-md-3 "Style=" Height:600px;overflow:auto;float:right "></div>

3. Initialize the map

var map = new Amap.map (' container ', {
                    resizeenable:true,
                    zoom:13,
                    Center: [104.078132,30.658462],//Map Center Point       
                });

finish the above operation on the realization of the map load, the effect is as follows:

here are some basic things to do 1. Load Map Control

Map control
                Amap.plugin ([' Amap.toolbar ', ' amap.scale ', ' Amap.overview '],
                    function () {
                        Map.addcontrol (new Amap.toolbar ());

                        Map.addcontrol (New Amap.scale ());

                        Map.addcontrol (New Amap.overview ({isopen:true}));
                

The effect is as follows:
2. Enter the hint:

HTML
 <input type= "text" class= "Form-control" id= "Start" >

JS
amap.plugin (' Amap.autocomplete ', function () {//callback function
                    //instantiation autocomplete
                    var autooptions = {
                        City: "Chengdu City",//cities, the default national
                        input: "Start"//use Lenovo input ID
                    };
                    autocomplete= new Amap.autocomplete (autooptions);
                    TODO: Invoke related features using the AutoComplete object
                })

The effect is as follows:

3. Search for addresses by keyword

<form class= "Form-inline" style= "border-bottom:2px solid #ebebeb;" >
                  <div class= "Form-group" >
                    <label > Keyword </label>
                    <input type= "text" class= " Form-control "id=" keyword "placeholder=" for example: Sichuan University ">
                  </div>
                 <button type=" button "class=" btn Btn-primary "style =" Background-color: #3385ff; "id=" Query2 "> Search </button>
                </form>

Location Search
            $ (' #query2 '). On (' click ', Function () {
                 amap.service (["Amap.placesearch"], function () {
                    var Placesearch = new Amap.placesearch ({//Construction location query class
                        Pagesize:5,
                        pageindex:1,
                        City: "Chengdu",//Urban
                        map:map,< C7/>panel: "Panel"
                    });
                    Keyword Query
                    placesearch.search ($ (' #keyword '). Val ());
                })
            

The effect is as follows:

4. Route planning

including driving route planning, cycling route planning, pedestrian route planning, bus inquiries, where the use of public transport inquiries
need to introduce corresponding JS construction class

<form class= "Form-inline" style= "border-bottom:3px solid #ebebeb;"
                    > <div class= "form-group" > <label > Inception </label>
                  <input type= "text" class= "Form-control" id= "Start" placeholder= "" > </div> <div class= "Form-group" > <label > End of </label> <input type= "Text" class= "Form-control" id= "End" placeholder= "> </div> <button type=" Button "class=" btn btn-primary "style =" Background-color: #3385ff; id= "Query" > Search </button> </fo Rm> 

$ (' #query '). On (' click ', Function () {clearmapinfo (); * * Call Bus transfer service///Load Bus transfer plugin amap.service (["Amap.transfer "], function () {var transoptions = {Map:map, city:
                        "Chengdu City",//Bus City Panel: "Panel",//cityd: ' Urumqi ',
                    Policy:AMap.TransferPolicy.LEAST_TIME//Bus strategy};
                    Construction of bus transfer class trans = new Amap.transfer (transoptions); According to the coordinates of the bus transfer route Trans.search ([{keyword:$ (' #start '). Val ()},{keyword: $ (' #end '). Val ()}], function (STA
                Tus, result) {});
            }); //Clear Last Search information function Clearmapinfo () {if (trans) {Trans.clea
                R ();
        }    } 

The effect is as follows:

5. Positioning Service

Locate service Amap.plugin (' Amap.geolocation ', function () {geolocation = new Amap.geolocation ({ enablehighaccuracy:true,//whether to use high precision positioning, default: True timeout:10000,//stop positioning after 10 seconds, default: Infinity maximumage:0,//Location result Cache 0 MS, default: 0 convert:true,//automatic offset coordinates, offset    After the coordinates for the German coordinates, the default: True Showbutton:true,//Display positioning button, default: True buttonposition: ' RT ',
                    Locate button docking position, default: ' LB ', lower left corner buttonoffset:new Amap.pixel (10, 20),//offset of position button and set docking position, default: Pixel (10, 20) Showmarker:true,//positioning after success in the location to display the point mark, default: True Showcircle:true,//positioning after successful Use a circle to indicate the range of positioning precision, default: True Pantolocation:true,///positioning the location to be positioned as the center point of the map, default: True Zoomtoa
                Ccuracy:true//Positioning after the successful adjustment of the map field of vision to the location and accuracy of the range of vision visible, default: false});
                Map.addcontrol (geolocation); GeolocaTion.getcurrentposition (); AMap.event.addListener (geolocation, ' complete ', oncomplete)//Return positioning information AMap.event.addListener (geolocation, '      Error ', onError);
 Return to locate error message});