1. Add a zoom control
  2. Mark point + information display
  3. Outputs the coordinates of the current click, and converts to address output
  4. Current issue: map transfer markers do not move after clicking a new location
<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset = UTF-8 "/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/ CSS "> body, html { width: 100%; height: 100%; margin: 0; Font-family: 'Microsoft yahei'; } #allmap { width: 100%; height: 90%; overflow: hidden; } p { margin-left: 5px; font-size: 14px; } < / style > < script type = "text/javascript SRC =" key "http://api.map.baidu.com/api?v=2.0&ak=" > < / script > < title > < / title > </head> <body> <div id="allmap"></div> </body> </ HTML >< script type="text/javascript" BMap.Map("allmap"); Var point = new map.point (116.417854, 39.921988); var point = new map.point (116.417854, 39.921988); var marker = new BMap.Marker(point); // Create marker map.addoverlay (marker); CenterAndZoom (point, 15); map.addControl(new BMap.NavigationControl()); Var opts = {width: 200, // 信息 window width: 100, // 信息 window height: 100, // 信息 window height: 100, // 信息 window title:" True, // Set to allow window to send SMS}; Var infoWindow = new map. infoWindow (" address: 8 / F, Lotte Intime Department Store, 88 Wangfujing Street, Dongcheng District, Beijing ", opTS); AddEventListener ("click", function () {map.openInfoWindow(infoWindow, point); // Open message window}); map.addEventListener("click", function (e) { console.log(e.point.lng + "," + e.point.lat); // Click the map to get the coordinates; // map.panTo(new BMap.Point(e.point.lng,e.point.lat)); Var geoc = new map.geocoder (); geoc.getLocation(point,function(rs){ var addComp = rs.addressComponents; // alert(addComp.province + ", " + addComp.city + "," + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); console.log(addComp); }); var marker = new BMap.Marker(point); map.addOverlay(marker); document.getElementById("allmap").value = e.point.lng+ "," + e.point.lat; }); // Create city selection control // var cityControl = new map. CityListControl({// // control dock location (optional, default top left corner) // anchor: BMAP_ANCHOR_TOP_RIGHT, // // control based on the offset of the docking position (optional) // offset: new map. Size(10, 5), //}); // // Add controls to the map // map.addControl(cityControl); map.enableScrollWheelZoom(true); Var scaleCtrl = new map.scalecontrol (); // Add scale control map.addControl(scaleCtrl); var zoomCtrl = new BMap.ZoomControl(); // Add scale control map.addControl(zoomCtrl); </script>Copy the code