Ideas:
1 Right-click first to turn on functions that can be collected
2 Double-click the map to add latitude and longitude to the array
3 Added to 10 Close Collection Functions
4 After the address collection is completed, the map shows that this is a landmark (icon)
5. Create an object for an information window
6 Click on the icon to display the location information
step
1. Format and introduce Baidu Map API file and js file in html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--Introducing Baidu API file-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AprPCc8Vizizbwc8qKmxk8D13Yl9cTKs"></script>
<!--Setting Styles.div The size of the page should be the same as that of the visual page so that the map can be displayed on all pages.-->
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#map{width: 100%;height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
</body>
<!--Introduce js Pay attention to Baidu API Documents to be in js In front of the file-->
<script type="text/javascript" src="js/new_file.js"></script>
</html>2 New js file
Code thinking analysis:
First, give a (function(){}() self-calling function, which will call itself. The inner atmosphere of the self-calling function is divided into three parts: 1. Introducing a map and initializing it so that the map can be displayed on the same page. 2 is to give a method according to the effect to be achieved, using addEventListener () to give a right-click event to the top method listenr; listenr method is a double-click event, the method of this double-click event is to get the longitude and latitude of the double-click event, store the information in an array, when the double-click is full ten times, the double-click event stops, and then the console displays. Address information, which displays ten double-clicked addresses in the form of an icon on a map. 3. Create a visual window object addMarkerToMap (). When you click on the address icon, the window appears and displays the text address information of the address coordinates.
(function () {
var map = new BMap.Map("map");
function takePoints(done) {
// Method of execution or rejection in Promise(function (done，reject) {}) It can only be executed once (It's possible to Promise Removal of parameters passed in)
// When can't Promise be used?
//Promise cannot be used when a callback needs to be executed multiple times because callback can be used only once - >.
var points = []; //Longitudinal and latitudinal arrays
var isActionDblclick = false; //Has double-click been triggered?
function listenr() {
if (isActionDblclick){ // If double-clicked, no double-click events will be added.
return;
}
// Double-click the map to add latitude and longitude to the array
// add to10individual
// add to10Close Collection Function
isActionDblclick = true; //Identified as double-clicked
function takeStart(event) { //Method of collecting coordinate points
console.log(event);
points.push(event.point); // Add latitude and longitude to the array
if (points.length>=10){ // add to10Close Collection Function
console.log(points);
done(points); //Give the collected coordinate points to the location of the call
isActionDblclick = false; // Turn off the collection function
map.removeEventListener("dblclick",takeStart);
points = [];
}
}
map.addEventListener("dblclick",takeStart);
}
map.addEventListener("rightclick",listenr); //The first is a right-click event.
}
function addMarkerToMap(point) { //Create an object for an information window
var marker = new BMap.Marker(point); //Declare an icon
map.addOverlay(marker); //Put the icon on the map
marker.addEventListener("click",function () { //Set a listen event Click trigger for the icon
new BMap.Geocoder().getLocation(point,function (result) { //Get the user's address resolution. Geocoder().getLocation()Converting latitude and longitude into text information
console.log(result.address);
var infoWindow = new BMap.InfoWindow(result.address); //Declare that a variable equals address information
marker.openInfoWindow(infoWindow); // When clicking on the icon
});
});
}
function init() {
map.centerAndZoom("Beijing");
map.disableDoubleClickZoom();
takePoints(function (result) {
result.forEach(function (point) { // Result - > He's the points array that's coming in - > It's the coordinates.
addMarkerToMap(point);
})
});
}
init();
})();Be careful:
1. Array points should be placed outside the function
2. Stop double-click events by using variables isAction Dblclick values true and false and if judgements