Добрый день, друзья.
В наше время мало какой сайт может обойтись без интеграции Google технологий. Я постараюсь рассказать как интегрировать в ADF Google maps. Приступим. Сделаем страничку на которой можно найти место на карте, введя его в input text
Для этого :
1. Создайте ADF приложение в JDeveloper и создайте пустую jspx страницу( если вы незнаете как это делать, прочитайте статью http://www.oracle-adf.info/2013/01/adf-jdeveloper.html )
2.Добавьте на страницу panelSplitter(слева будет поле куда вводить город и кнопка подтверждения,а справа карта)
3. В левую часть добавьте af:inputtext и af:commandButton( в нем установите свойство partialSubmit="true" и добавьте внутрь кнопки af:clientListener для вызова метода по клику) и "оберните их в panelGroupLayout. в итоге должен получиться следующий код в <f:facet name="first">:
В наше время мало какой сайт может обойтись без интеграции Google технологий. Я постараюсь рассказать как интегрировать в ADF Google maps. Приступим. Сделаем страничку на которой можно найти место на карте, введя его в input text
Для этого :
1. Создайте ADF приложение в JDeveloper и создайте пустую jspx страницу( если вы незнаете как это делать, прочитайте статью http://www.oracle-adf.info/2013/01/adf-jdeveloper.html )
2.Добавьте на страницу panelSplitter(слева будет поле куда вводить город и кнопка подтверждения,а справа карта)
3. В левую часть добавьте af:inputtext и af:commandButton( в нем установите свойство partialSubmit="true" и добавьте внутрь кнопки af:clientListener для вызова метода по клику) и "оберните их в panelGroupLayout. в итоге должен получиться следующий код в <f:facet name="first">:
<af:panelGroupLayout layout="scroll" id="pgl1">
<af:inputText id="it1" />
<af:commandButton text="Ок" id="cb2" partialSubmit="true" >
<af:clientListener method="codeAddress" type="click"/>
</af:commandButton>
</af:panelGroupLayout>
<af:inputText id="it1" />
<af:commandButton text="Ок" id="cb2" partialSubmit="true" >
<af:clientListener method="codeAddress" type="click"/>
</af:commandButton>
</af:panelGroupLayout>
4.В правую часть добавьте следующий код:
<af:group>
<div id="map" style="width: 800px; height: 800px"></div>
</af:group>
<div id="map" style="width: 800px; height: 800px"></div>
</af:group>
5.Добавьте в код jspx страницы между </af:form> и </af:document> скрипты для работы с google map:
<f:facet name="metaContainer">
<af:resource type="javascript" source="https://www.google.com/jsapi"/>
<af:resource type="javascript">
google.load("maps", "3",{other_params:"sensor=false"}); // это строка обозначает необходимо загрузить API Google Карт 3-ей версии (самая последняя на данный момент)
var map;
var marker;
var geocoder;
function initialize()
{
geocoder=new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(52.071213, 23.754115); //установка координат(широта,долгота) по умолчанию( место которое будет загружаться при запуске страницы)
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
google.setOnLoadCallback(initialize);
</af:resource>
<af:resource type="javascript">
function codeAddress(evt)
{
var addressIt=document.getElementById("it1::content"); //извлечение места которого нужно найти по id inputext-а
var address=addressIt.value;
geocoder.geocode({'address':address},function(results,status){
if(status==google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location
}
);
}
});
}
</af:resource>
</f:facet>
<af:resource type="javascript" source="https://www.google.com/jsapi"/>
<af:resource type="javascript">
google.load("maps", "3",{other_params:"sensor=false"}); // это строка обозначает необходимо загрузить API Google Карт 3-ей версии (самая последняя на данный момент)
var map;
var marker;
var geocoder;
function initialize()
{
geocoder=new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(52.071213, 23.754115); //установка координат(широта,долгота) по умолчанию( место которое будет загружаться при запуске страницы)
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
google.setOnLoadCallback(initialize);
</af:resource>
<af:resource type="javascript">
function codeAddress(evt)
{
var addressIt=document.getElementById("it1::content"); //извлечение места которого нужно найти по id inputext-а
var address=addressIt.value;
geocoder.geocode({'address':address},function(results,status){
if(status==google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location
}
);
}
});
}
</af:resource>
</f:facet>
Это простой пример. Не забывайте, что при помощи af:clientAttribite и команды document.getElementById с формы можно брать не только место поиска, но и например масштаб (в скрипте zoom). : )
Комментариев нет:
Отправить комментарий