Introduction to the
In order to more skilled use of Baidu map API, the simplest way is to achieve a DEMO. Of course, DEMO is also a slow implementation, here we first explain a simple sector drawing function.
The introduction of the map
- through
scriptLabel loading mapapiAnd then throughBMapGL.Map('bmap')Instantiate the map. A simple map is done.
<script src="Https://api.map.baidu.com/api?type=webgl&v=1.0&ak= ak"></script>
<div id="bmap" class="bmap"></div>
<script>
// Create a Map instance
var map = new BMapGL.Map('bmap')
// Initialize the map and set the center point coordinates and map level
map.centerAndZoom(new BMapGL.Point(121.480509.31.23592), 10)
// Enable the mouse wheel event
map.enableScrollWheelZoom()
</script>
Copy the codeAuxiliary function
- To draw a fan on a map,
Polygon()Function. According to the total length of the sector radian, calculate the number of sector boundary points, and then calculate the coordinates of each boundary point according to the circle point coordinates and radius, and pass the calculated points throughPolygon()The function is plotted on the map. - To achieve the sector point coordinates of the function.
/ * * *@param The point of origin *@param Radius Radius: meters x@param SRadian Start radian *@param ERadian end radian * */
function sector(point, radius, SRadian, ERadian) {
//
var points = [] // Create the group of points that make up the polygon
points.push(point) / / starting point
// Calculate the sector point distribution in radians
var step = (ERadian - SRadian) / 15 || 15
for (var i = SRadian; i < ERadian + 0.001; i += step) {
// Retrieve the coordinates of the points on the arc
points.push(EOffsetBearing(point, radius, i))
}
// Connect the starting point
points.push(point)
return points
}
Copy the code- Use mathematical methods to calculate the coordinates of points on the arcs that need to draw the sector.
/ * * *@param The point of origin *@param Dist radius *@param Bearing count * */
function EOffsetBearing(point, dist, bearing) {
// Calculate the distance between 1 longitude and the origin
var lngConv = map.getDistance(point, new BMapGL.Point(point.lng + 0.1, point.lat)) * 10
// Calculate the distance of latitude 1 from the origin
var latConv = map.getDistance(point, new BMapGL.Point(point.lng, point.lat + 0.1)) * 10
// Calculate the latitude difference between the point to be obtained and the origin
var lat = (dist * Math.sin((bearing * Math.PI) / 180)) / latConv
// Calculate the difference between the longitude of the point to be obtained and the longitude of the origin
var lng = (dist * Math.cos((bearing * Math.PI) / 180)) / lngConv
return new BMapGL.Point(point.lng + lng, point.lat + lat)
}
Copy the codeDraw a sector according to a specified data format.
- The data format is self – prescribed, convenient to obtain data later.
- The thing to notice here is that the radius is measured in meters.
varMapDate = {Shanghai: [121.480509.31.23592.0.90.'Shanghai'], Shanghai2: [121.480509.31.23592.100.130.'2' in Shanghai]}function makesectors(mapDate) {
for (var key in mapDate) {
var temPoi = mapDate[key]
/ / dot
var point = new BMapGL.Point(temPoi[0], temPoi[1])
/ / radian
SRadian = temPoi[2]
ERadian = temPoi[3]
// 30000 Radius unit: meter
var oval = new BMapGL.Polygon(sector(point, 30000, SRadian, ERadian), {
strokeColor: '#ADFF2F'.// Edge color
strokeWeight: 1.// The width of the edge, in pixels
strokeOpacity: 0.5.// Edge transparency, value range 0-1
fillColor: '#ADFF2F'.// Fill the color
fillOpacity: 0.5
})
map.addOverlay(oval)
// // Text Content
// var text = temPoi[4]
// onClick(text, oval) // Mouse click event
// onMouseover(oval)
// onMouseout(oval)
}
}
makesectors(mapDate)
Copy the code- A simple sector drawing appears
Add the interaction
- In development, you can’t just draw pictures, you need some interaction with events. Fortunately, in the
The map APIImplement a set and nativeDOMBasically the same event model can be used directly for coverings.
Click on the event
- By covering internal functions
addEventListenerTo set listener events. - By setting the mulch
clickEvent listening, to achieve click callback.
// Click the event
function onClick(text, marker) {
marker.addEventListener('click'.function (e) {
openWin(text, marker.getBounds().getCenter())
})
}
// Define the information window style
var opts = {
width: 250.// Information window width
height: 80.// Information window height
title: 'Information Window' // Information window title
}
var infoWindow = null
// Open the info window
function openWin(text, centerPoint) {
// Create an information window object
infoWindow = new BMapGL.InfoWindow(text, opts)
// Close Closes the info window when you click on the map
infoWindow.disableCloseOnClick()
// Open the information window
map.openInfoWindow(infoWindow, centerPoint)
}
Copy the code- So what we’re using here is an information window overlay
InfoWindowTo set the window style and content according to the default parameters written by the document. Through the map instanceopenInfoWindow()Add information window to map.InfoWindowIt also provides functions to control itself.
The mouse moving
function onMouseover(oval) {
oval.addEventListener('mouseover'.function () {
oval.setStrokeWeight(2) // The boundary is widened
oval.setStrokeOpacity(1) // The boundary color is darker
oval.setFillOpacity(1) // Make the fill color darker})}Copy the code- In the callback function, modify the covering style through the function provided by the covering. Realize the interactive effect of mouse moving.
The mouse away
function onMouseout(oval) {
oval.addEventListener('mouseout'.function () {
oval.setStrokeWeight(1) // Restore the boundary
oval.setStrokeOpacity(0.5) // Boundary transparency changes
oval.setFillOpacity(0.5) // Fill color change})}Copy the code-
In the callback function, the parameters are recovered by the same function. To achieve the mouse to move the interactive effect. Pay attention to the recovery parameters do not have errors, otherwise it will affect the user experience.
-
The final result
