A first positioning.
Baidu define six coordinate points, and then creates a corresponding coordinate point on the marker, and then through the Map.addOverlay (marker) Method 6 positioned in the marker Baidu map, using marker.disableMassClear () method can not be provided to marker Clear, finally add the mouse over the event marker. As follows:
// Initialize Baidu map
var = new new BMap.Map Map ( 'Map');
map.centerAndZoom (new new BMap.Point (116.3875773621, 39.9156402091),. 6); // initialize the map, and the map center coordinates set level
map.enableScrollWheelZoom (); // open the mouse wheel to zoom
// map is positioned in six points
var locPoints = [
new new BMap.Point (108.574138248194, 34.197235684692),
new new BMap.Point (108.683296262141, 33.877960833917),
new new the BMap. Point (108.518062680055, 38.057251109697),
new new BMap.Point (108.546627635172, 38.312875770488),
new new BMap.Point (109.151927017928, 34.686473580787),
BMap.Point new new (108.411427712714, 33.266286514603)
];
// to six point location on the map
locPoints.forEach (function (value) {
var locMarkers;
locMarkers new new BMap.Marker = (value);
the Map.addOverlay (locMarkers); // the labels added to the map
locMarkers.disableMassClear (); // set the marker can not be cleared
locMarkers.addEventListener ( "mouseOver", function (E) {
openDataInfo (value, E);
});
});
// mouse slip event marker
function openDataInfo (Result, E) {
var carOpts = {
width: 200 is, // window width information
height: 120, // window height information
title: "<b> Device Information </ b>", // window title information
enableMessage: true // permission information setting window sending a text
};
var P = e.target;
var = new new BMap.Point Point (P. .. the getPosition () LNG, p.getPosition () LAT);
carContent = 'a <Table> <thead>' +
'<TR> <TH> <label> Access: </ label> <a οnclick = "showOrderTrackDiv ()"> < span style = "color: # 478FCA; margin-left: 15px;"> track playback </ span> </a> </ th > </ tr> </ thead> <tbody> '+
' <TR> <TD> longitude: '. + p.getPosition () lng +' </ td> </ tr> <tr> <td> Lat: '. + p.getPosition () lat +' </ td > </ TR> '+
'</ tbody> </ Table> </ div> ';
var = infoWindow new new BMap.InfoWindow (carContent, carOpts); // Create Object Information Window
map.openInfoWindow (infoWindow, point); // open the message window
}
// track playback function
function showOrderTrackDiv () {
Alert ( "track playback function");
}
two, circle, rectangle, polygon
must first map comprising css and js Baidu mouse drawing tool, as follows:
<! - load the mouse drawing tools ->
<Script of the type = "text / JavaScript" src = "http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"> </ Script>
<! - mouse drawing tool loading ->
<Link the rel = "this stylesheet" the href = "http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
then define a drawing styles, and examples of mouse drawing tool, and finally the mouse to draw tool to add a callback method after the completion of the mouse to draw. As follows:
var = {styleOptions
strokeColor is: "Black", // edge color.
fillColor: "red", // fill color. When the parameter is empty, no round the filling effect.
strokeWeight: 3, // edge width, in pixels.
strokeOpacity: 0.8, // edge transparency, in the range 0 - 1.
fillOpacity: 0.6, // fill transparency, in the range 0 - 1.
strokeStyle: 'solid' // sideline style, solid or dashed.
}
// instantiate the mouse to draw tool
var = myDrawingManagerObject new new BMapLib.DrawingManager (Map, {
the isOpen: to false, // draw mode is turned
enableDrawingTool: true, // whether the toolbar is displayed
drawingToolOptions: {
Anchor: BMAP_ANCHOR_TOP_RIGHT, // position
offset : new BMap.Size (5, 5) , // offset value
},
the circleOptions: styleOptions, // round style
polylineOptions: styleOptions, // line style
polygonOptions: styleOptions, // polygon style
rectangleOptions: styleOptions // rectangular style
});
// Adds mouse event listener drawing tool, for acquiring the rendering result
myDrawingManagerObject.addEventListener ( 'overlaycomplete', overlaycomplete) ;
three point determines whether the circle or the rectangle
in the drawing completion callback method of the mouse, using BMapLib.GeoUtils. isPointInCircle (point, circleObject) determines the point is within the circle, or by BMapLib.GeoUtils.isPointInPolygon (point, polygonObject) determines the point is within the rectangle.
When using isPointInCircle or isPointInPolygon method comprising GeoUtils_min.js required in the page. As follows:
<Script type = "text / JavaScript" the src = "http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"> </ Script>
follows:
function An overlaycomplete (E ) {
var cirCount = 0;
var Polycount = 0;
myDrawingManagerObject.close (); // Close Paint
var drawingModeType = e.drawingMode; // Get the type of graphics drawn
locPoints.
IF (drawingModeType == "Circle") {
// circle
IF (BMapLib.GeoUtils.isPointInCircle (value, e.overlay)) {
cirCount ++;
}
} the else IF (drawingModeType == "Rectangle" || drawingModeType == "Polygon" ) {
// rectangular or polygonal
IF (BMapLib.GeoUtils.isPointInPolygon (value, e.overlay)) {
Polycount ++;
}
}
});
Alert ( "circle contains" + cirCount + "positioning points, polygonal or rectangular with" + polyCount + "positioning points.");
Map.removeOverlay (e.overlay); // Clear after drawing objects drawn
}
The final results as shown below:
mouse over the marker results as shown below:
At this point, how to draw a circle in Baidu map, rectangular painting, drawing polygons, and determines whether the coordinate points within the circle, the rectangle function has been completed .
----------------
