primefaces gmap搜索中心(primefaces gmap search center)
当我搜索地点时，地图会更新。但是居中的值不会更新。任何帮助都会很棒。
/ * xhtml如下* /
<h:outputLabel value="Search Location :" for="acSimple" /> <p:autoComplete id="acSimple" minQueryLength="0" value="#{sampleMapProducer.searchString}" forceSelection="true" completeMethod="#{sampleMapProducer.complete}"> <p:ajax event="itemSelect" update="gmap_loc" process="#{sampleMapProducer.searchCenter}" /> <p:ajax process="@this" update="gmap_loc" /> </p:autoComplete> <p:outputPanel id="gmapPanel" autoUpdate="true"> <p:gmap center="#{sampleMapProducer.searchCenter}" zoom="6" type="ROADMAP" style="width:100%;height:600px" model="#{sampleMapProducer.mapBySearch}" id="gmap_loc"></p:gmap> </p:outputPanel>地图的Bean代码：
private void clearMap (MapModel map) { for (Marker marker : map.getMarkers()) { marker.setVisible(false); } }/ *获取搜索地图* /
public MapModel getMapBySearch () { clearMap(mapBySearch); for (Marker markerIterator : markersList) { if (searchString == null || searchString.trim().equals("")) { mapBySearch.addOverlay(markerForLocation(markerIterator,BLUE_DOT)); } else { if (markerIterator.getTitle().toLowerCase().contains(searchString.toLowerCase())) { mapBySearch.addOverlay(markerForLocation(markerIterator,BLUE_DOT)); } } } return mapBySearch; }/ *自动完成字符串* /
public List<String> complete ( String searchString) { List<String> suggestedStrings = new ArrayList<String>(); for (String locationName : LOCATION_NAMES) { if (locationName.toLowerCase().contains(searchString.toLowerCase())) { suggestedStrings.add(locationName); } } this.searchString = searchString; return suggestedStrings; }/ *获取位置中心* /
public String getLocationCenter () { String center = "39,-98"; for (LocationGeocodeBean geoCode : GEO_CODES) { if (geoCode.getId().equals(selectedLocationId())) { if ((geoCode.getLatitude() != 0) && (geoCode.getLongitude() != 0)) { center = String.format("%s,%s", geoCode.getLatitude(),geoCode.getLongitude()); } return center; } } } return center; }When I search for a place the map is updated.But the centering value does not get updated.Any help would be great.
/* The xhtml is given below */
<h:outputLabel value="Search Location :" for="acSimple" /> <p:autoComplete id="acSimple" minQueryLength="0" value="#{sampleMapProducer.searchString}" forceSelection="true" completeMethod="#{sampleMapProducer.complete}"> <p:ajax event="itemSelect" update="gmap_loc" process="#{sampleMapProducer.searchCenter}" /> <p:ajax process="@this" update="gmap_loc" /> </p:autoComplete> <p:outputPanel id="gmapPanel" autoUpdate="true"> <p:gmap center="#{sampleMapProducer.searchCenter}" zoom="6" type="ROADMAP" style="width:100%;height:600px" model="#{sampleMapProducer.mapBySearch}" id="gmap_loc"></p:gmap> </p:outputPanel>Bean Code for the map:
private void clearMap (MapModel map) { for (Marker marker : map.getMarkers()) { marker.setVisible(false); } }/* Get map for searching */
public MapModel getMapBySearch () { clearMap(mapBySearch); for (Marker markerIterator : markersList) { if (searchString == null || searchString.trim().equals("")) { mapBySearch.addOverlay(markerForLocation(markerIterator,BLUE_DOT)); } else { if (markerIterator.getTitle().toLowerCase().contains(searchString.toLowerCase())) { mapBySearch.addOverlay(markerForLocation(markerIterator,BLUE_DOT)); } } } return mapBySearch; }/* Auto complete String */
public List<String> complete ( String searchString) { List<String> suggestedStrings = new ArrayList<String>(); for (String locationName : LOCATION_NAMES) { if (locationName.toLowerCase().contains(searchString.toLowerCase())) { suggestedStrings.add(locationName); } } this.searchString = searchString; return suggestedStrings; }/* get location center */
public String getLocationCenter () { String center = "39,-98"; for (LocationGeocodeBean geoCode : GEO_CODES) { if (geoCode.getId().equals(selectedLocationId())) { if ((geoCode.getLatitude() != 0) && (geoCode.getLongitude() != 0)) { center = String.format("%s,%s", geoCode.getLatitude(),geoCode.getLongitude()); } return center; } } } return center; }最满意答案
好吧，我完全不懂你的代码，所以我创建了一个简单的例子。 它会在地图上放置一些标记，当您单击地图时，地图将以标记为中心。 您可以使用回调参数。 因此，当您单击或选择表单中的某些内容时，您会发回一个参数并在JavaScript中捕获它，然后更新您的地图。 请尝试以下示例：
豆：
public class MapBean { private MapModel advancedModel; public MapBean() { advancedModel = new DefaultMapModel(); LatLng coord1 = new LatLng(36.883707, 30.689216); LatLng coord2 = new LatLng(36.879703, 30.706707); LatLng coord3 = new LatLng(36.885233, 30.702323); advancedModel.addOverlay(new Marker(coord1)); advancedModel.addOverlay(new Marker(coord2)); advancedModel.addOverlay(new Marker(coord3)); } public MapModel getAdvancedModel() { return advancedModel; } public void onMarkerSelect(OverlaySelectEvent event) { Marker marker = (Marker) event.getOverlay(); RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam("lat", marker.getLatlng().getLat()); context.addCallbackParam("lng", marker.getLatlng().getLng()); } }和.xhtml
<h:form id="form"> <p:gmap center="36.890257,30.707417" zoom="13" type="HYBRID" model="#{mapBean.advancedModel}" style="width:600px;height:400px" id="maps" widgetVar="map" onPointClick="pointClick(event)"> <p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" oncomplete="handleComplete(xhr, status, args)"/> </p:gmap> <script type="text/javascript"> function handleComplete(xhr, status, args) { //Create center point from callback params var latlng = new google.maps.LatLng(args.lat , args.lng); //Get de google map from your widget now you can use the googlemap api var gmap = map.getMap(); gmap.setCenter(latlng); } </script> </h:form>Well i don't understand your code completely so i created a simple example. It puts some markers on the map and when you click the map the map centers to the marker. You can make use of callback parameters. So when you click or select something in your form you send back a parameter and catch this in JavaScript and then update your map. Try the following example:
Bean:
public class MapBean { private MapModel advancedModel; public MapBean() { advancedModel = new DefaultMapModel(); LatLng coord1 = new LatLng(36.883707, 30.689216); LatLng coord2 = new LatLng(36.879703, 30.706707); LatLng coord3 = new LatLng(36.885233, 30.702323); advancedModel.addOverlay(new Marker(coord1)); advancedModel.addOverlay(new Marker(coord2)); advancedModel.addOverlay(new Marker(coord3)); } public MapModel getAdvancedModel() { return advancedModel; } public void onMarkerSelect(OverlaySelectEvent event) { Marker marker = (Marker) event.getOverlay(); RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam("lat", marker.getLatlng().getLat()); context.addCallbackParam("lng", marker.getLatlng().getLng()); } }And the .xhtml
<h:form id="form"> <p:gmap center="36.890257,30.707417" zoom="13" type="HYBRID" model="#{mapBean.advancedModel}" style="width:600px;height:400px" id="maps" widgetVar="map" onPointClick="pointClick(event)"> <p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" oncomplete="handleComplete(xhr, status, args)"/> </p:gmap> <script type="text/javascript"> function handleComplete(xhr, status, args) { //Create center point from callback params var latlng = new google.maps.LatLng(args.lat , args.lng); //Get de google map from your widget now you can use the googlemap api var gmap = map.getMap(); gmap.setCenter(latlng); } </script> </h:form>更多推荐
searchString,mapBySearch,center,String,return,电脑培训,计算机培训,IT培训"/> <
发布评论