1. require map api (for google map component)
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>2. include this script (PrimefacesMap.js)
/**
* @author jittagorn pitakmetagoon
* create 01/04/2014
*/
var PrimefacesMap = (function(pf, google) {
// google map dependency
var maps = google.maps;
function isFunction(data) {
return typeof data === 'function';
}
function isString(data) {
return typeof data === 'string';
}
function forEach(array, callback, ctx) {
var length = array.length;
for (var i = 0; i < length; i++) {
callback.call(ctx, array[i], i, array);
}
}
function clearMarkers(obj) {
obj.markers && forEach(obj.markers, function(marker) {
marker.setMap(null);
});
obj.markers = [];
}
function createMarker(latitude, longitude) {
return new maps.Marker({
position: new maps.LatLng(latitude, longitude)
});
}
/**
* @constructor
* @param {String} widgetVar
*/
return function(widgetVar) {
if (!isString(widgetVar)) {
throw new Error('require widgetVar is String, define by attribute \'widgetVar\' of component <p:map/>.');
}
//marker move change callback listeners
var callbacks = [];
/**
* @param {Function} callback
*/
this.addMarkerMoveChangeListener = function(callback) {
if (!isFunction(callback)) {
throw new Error('require callback is Function.');
}
callbacks.push(callback);
};
/**
* @returns {Object}
*/
this.getMap = function() {
var map = pf(widgetVar).getMap();
if (!map) {
throw new Error('\'widgetVar\' not attribute of <p:map/>');
}
return map;
};
/**
* @param {Number} latitude
* @param {Number} longitude
*/
this.markerMoveTo = function(latitude, longitude) {
var map = this.getMap();
clearMarkers(map);
var marker = createMarker(latitude, longitude);
marker.setMap(map);
map.markers.push(marker);
forEach(callbacks, function(callback) {
callback(latitude, longitude, map);
});
};
/**
* @param {Number} latitude
* @param {Number} longitude
*/
this.setCenter = function(latitude, longitude) {
this.getMap().setCenter(new maps.LatLng(latitude, longitude));
};
};
})(window.PF, window.google);
3. new instance (require parameter widgetVar, define by attribute widgetVar on <p:map/> )var widgetVar = 'googlemap';
var googlemap__ = new PrimefacesMap(widgetVar);
googlemap__.addMarkerMoveChangeListener(function(latitude, longigutde, map){
// do something ...
});
4. bind method instance to onPointClick of component <p:map/><p:gmap ...
...
...
model="#{myManagedbean.map}"
widgetVar="googlemap"
onPointClick="googlemap__.markerMoveTo(event.latLng.lat(), event.latLng.lng())" <!-- **** --->
type="ROADMAP"/>
primefaces google map component : http://www.primefaces.org/showcase/ui/gmapHome.jsf
ไม่มีความคิดเห็น:
แสดงความคิดเห็น