H5 small content (5), h5 content

H5 small content (5), h5 content

Geolocation)
Basic Content
Geographic Positioning-intersection of the longitude and latitude of the earth
Geographic Positioning
GPS-the United States, relying on Satellite Positioning
Beidou positioning-domestic only, inertial positioning technology and satellite positioning
Base station positioning-mobile operators create base stations (provide signal sources)
Internet-based IP addresses (PC and mobile)
Currently, many browsers have the positioning function.
Geographical location in HTML5
The location function is not a proprietary HTML5 content.
HTML5 geographic positioning technology, provided by Google
Google Map Product
China-all services and products of Google cannot be used in China
Baidu map and AMAP
Baidu Map
Baidu map-http://developer.baidu.com/map/
Register Baidu developer account
Http://developer.baidu.com/
Condition-must be connected to the Internet
Objective-to learn how to use Baidu Map
JS library or Baidu Map
Provided API help documentation
Demo code provided
Objective
Functions of Baidu Map
Features of Baidu Map
How to use Baidu Map
In the HTML page
Introducing Baidu map JS
Http://api.map.baidu.com/api? V = 2.0 & ak = Key
Define the container for displaying the map
<Div id = "" style = ""> </div>
In javascript code
Create Baidu Map object
Var map = new BMap. Map (container id );
Map Initialization
Map. centerAndZoom ();
Components of Baidu Map
Core class-Map class
Constructor-BMap. Map (container id );
Method
CenterAndZoom ()-Initialization Method
AddControl ()-add control
AddOverlay ()-add Annotation
Control-Controls
ScaleControl-scale of a map
Constructor-create a scale object
NavigationControl class-indicates a mobile scaling Control
Constructor-create a mobile scaling Control
Overlay class-covering class
Marker class-indicates a map Annotation
Constructor-Marker (point)
Point class-annotation class
Drag/drop API
Implement drag-and-drop Effects
What is the file to be dragged? -Source Element
Where to drag it? -Target Element
Currently, drag and drop operations are implemented.
Use native DOM for implementation-the most troublesome
Use jQuery plug-in-drag effect
Drag and Drop functions provided in HTML5
Drag in HTML5
Source Element event
Dragstart-triggered when the Mouse starts dragging
Drag-when the mouse is dragged, it is similar to a mousemove event.
Dragend-triggered when the mouse ends dragging
Target element event
Dragenter-triggered when the mouse is dragged into the target Element
Dragover-triggered when the mouse reaches the current element
Add event. preventDefault () for this event ();
Drop-triggered when the mouse achieves the drag-and-drop effect
By default, this event is not triggered
Cause-by default, HTML pages cannot be dragged or dropped.
It is called the default behavior of HTML pages.
Solution: block the default page Behavior
Event object event. preventDefault () method
Dragleave-triggered when you drag and drop the mouse to exit the target Element
DataTransfer object
Function-functions similar to window System clipboard
Function
You can store the information (data) of the source element here.
The Source Element information stored in the object is provided to the target element.
Method
SetData ()-set (Source Element) data
Use in Source Element event
GetData ()-Get the Set Data
Used in the target element event
ClearData ()-clear (SET) data
All data content is stored in browser memory
Clear data after use
SetDragImage () method
Purpose: modify the effect of the image following the mouse during the drag-and-drop process.
Usage-events such as drag and dragstart
Note: In actual operations, this method is almost unnecessary.