Previously, AMAP apis were used, and Baidu's map apis were required. These APIs have been encapsulated intelligently. You only need some programming thinking to implement functions easily.
Previously, AMAP apis were used, and Baidu's map apis were required. These APIs have been encapsulated intelligently. You only need some programming thinking to implement functions easily.
Feature Overview: you can click the location on the map to draw a map, and then save the obtained location to the address bar on the map.
Mainly the use of Baidu map API
The Code is as follows:
Var map = new BMap. Map ("allmap"); // instantiate a map object
Var point = new BMap. Point (116.331398, 39.897445); // you can specify the location of the map center.
Map. centerAndZoom (point, 12); // sets the visible layer of the map element.
Map. enableScrollWheelZoom (); // enables scroll wheel zoom in and out, which is disabled by default.
Map. enableContinuousZoom (); // enable map inertial drag and drop. disabled by default.
Function myFun (result ){
Var cityName = result. name;
Map. setCenter (cityName );
}
Var myCity = new BMap. LocalCity ();
MyCity. get (myFun );
I = 0
// Click to obtain coordinates
Map. addEventListener ("click", function (e ){
If (I = 0)
{
// Storage longitude and latitude
Lng = e. point. lng;
Lat = e. point. lat;
// Draw points on the map
Var marker = new BMap. Marker (new BMap. Point (lng, lat); // create Annotation
Map. addOverlay (marker );
Marker. enableDragging (); // drag
Var gc = new BMap. Geocoder ();
// Obtain the address data address
Var pt = e. point;
Gc. getLocation (pt, function (rs ){
Var addComp = rs. addressComponents;
Address = addComp. province + addComp. city + addComp. district + addComp. street + addComp. streetNumber;
// Draw
Var label = new BMap. Label (address, {offset: new BMap. Size (20,-10 )});
Marker. setLabel (label );
});
I = 1;
}
});
The above code is basically the DOME provided by Baidu. I just made some simple combinations .. Shame