point-map v0.1.4
Point-map
An elegant global view map.
Usage
1. Install
You can use this library through NPM, Javascript <Script> tag from CDN.
1.1 NPM
Use NPM install package
npm install point-mapimport it in your .js file
import PointMap from 'point-map'1.2 Script
<script src="https://unpkg.com/point-map/dist/mymap.min.js" crossorigin></script>Hello World
<html>
<head>
<title>Point-map demo</title>
<script src="https://unpkg.com/point-map/dist/pointmap.min.js" crossorigin></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create an instance
let map = new PointMap('map');
// Add event points
map.addEvents([{
name: '上海',
coordinate: [121.47, 31.233]
}, {
name: '北京',
coordinate: [116.41, 39.90]
}]);
// regiest events
map.on('mousemove', function(e, data) {
console.log(data);
})
</script>
</body>
</html>Interfaces
PointMap(elementID)
Create an point map instances by given a DOM's id.
Example:
new PointMap('map');PointMap.addEvent(EventObject)
Add a event on the map.
EventObject.name String The name of the Event, Could be anything.
EventObject.coordinate Array The Latitude and longitude of the Event Latitude, Longitude
EventObject[others] Any Other Customer propertis of the event;
Example:
map.addEvents({
name: 'Shanghia',
coordinate: [121.47, 31.233]
})PointMap.addEvents(EventPoints)
Add many events on the map, This is a short cut of the PointMap.addEvent.
Example:
map.addEvents([
{
name: 'Shanghia',
coordinate: [121.47, 31.233]
},
{
name: 'Beijing',
coordinate: [116.41, 39.90]
}
])PointMap.on(EventName, CallbackFunction)
Add an event on the map.
EventName String the event name could be mousemove,click
CallbackFunction(event, Pointinfo) When the event trigger, the 1st param is the DOM event, The 2nd param is object of the customer Point info.
Examples:
let map = new PointMap('map');
// Add event points
map.addEvents({
name: '上海',
coordinate: [121.47, 31.233]
});
map.on('mousemove', function(e, data) {
if (data) {
console.log('you are move into a customer Event', data)
} else {
console.log('you are not on a custome')
}
});PointMap.remove(EventName, EventFunction)
Remove an event on the map.
EventName String the event name
EventFunction The function Which we add to the map
Examples:
let map = new PointMap('map');
// Add event points
map.addEvents({
name: '上海',
coordinate: [121.47, 31.233]
});
const fn = (e,data)=>{console.log('you are moving')};
map.on('mousemove', fn);
map.remove('mousemove', fn);