Вы находитесь на странице: 1из 13

1/8/2015

MapCity API - Tutorial

Poweredby

OpenLayers
Desarrolladocon
SyntaxHighlighter2.0

APIdeMapasyGeocodificacin

Tutorial
Contenidos
Introduccin
ActualizacionesdelaAPI

Ejemplos
Lobsico
Movimentodelmapayanimacin
Agregandocontrolesalmapa
AgregandoMarcadores
AgregandoGeometrasGeoreferenciadas
LlamadasaServiciosdeMapCity
Widgets

Resolucindeproblemas

Introduccin
LaAPIdeMapCityesunaextensindeOpenlayersyExtCore.LostiposbsicosdelaAPIyloscontrolessonderivados
delostiposycontrolesdeOpenLayers,porlotantolamayoradelasfuncionesdeOpenLayersaplicanalasfunciones
delaAPI.EsrecomendablenousardirectamentelasfuncionesdeOpenLayers,peroencasodesernecesarioelatributo
olMapdelaclaseMapCity.Core.Maps.mapdaaccesoalobjetoOpenLayers.mapinstanciado.
AntesdeincluiralgunalibreraJavascript(porejemploparaanimaciones,llamadasAJAX,etc),tenerencuentaquela
APItienedisponibletodaslasfuncionalidadesdeExtCore3.0atravsdelaclaseMapCity.Coreyademsvarias
funcionesdeprototypeyRICOatravsdeOpenLayers.Porejemplo,parausarlafuncinExt.onReady()sedebe
llamarMapcity.Core.onReady().
Ejemplo:
Sepuedeverunejemplobsicodelusodelaapienejemplo.
HelloWorld
LaformamssimpledeusarlaAPIesusarelmapapordefecto.Elsiguientecdigomuestraunmapaconla
configuracinbsicapordefecto:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPEHTMLPUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="contenttype"content="text/htmlcharset=UTF8"/>
<title>MapCityHelloWorld</title>

<scripttype="text/javascript"src="http://api.mapcity.com/beta/0.3.2/be0f3a14e1076fee25e5415c1053

<scripttype="text/javascript">
//<![CDATA[

MapCity.Core.onReady(function(){

http://api.mapcity.com/docs/tutorial.php

1/13

1/8/2015

14
15
16
17
18
19
20
21
22
23

MapCity API - Tutorial

varmap=newMapCity.Maps.map('map')
})
//]]>
</script>
</head>
<body>
<divid="map"style="width:500pxheight:300px"></div>
</body>
</html>

UnadelaslneasmsimportantesdelcdigoeslainclusindelaAPI.SisevaausaralAPIsedebecambiarlallavepor
lallavecorrespondientealdominio(Solicitaraapi.mapcity.com).
ElotroparmetroimportanteeslaversindelaAPI.LapginaadministralasversionesdelaAPIysepuedecambiarde
unaversinaotraslocambiandoelnmerodeversin.
viewplain|print|?

<scripttype="text/javascript"src="http://api.mapcity.com/beta/[version]/[llave]"></script>

Ellenguajepordefectoesespaol.Encasodenecesitarotrolenguajesepuedeseleccionardelasiguienteforma:
Lobsico
Elsiguienteejemplo(elmismofragmentousadoenelejemploalprincipio)creaunmapaylocentraenSantiago,Chile.
PuedesnavegarporelmapaarrastrndolotalcomoenelsitioMapCity
viewplain|print|?

1
2

varmap=newMapCity.Maps.map('map')
map.setCenter(MapCity.Locale.cities['santiago'].lonlat)

ElelementomsimportanteesMapCity.Maps.map.Enelejemploseestnusandolosparmetrospordefecto.Estos
parmetrossepuedensobrescribirusandoliteralesdejavascript.Bsicamentesepasaalobjetounarreglodejavascript
contodoslosatributosquesedeseansobreescribir.Losmsimportantesson:
Provider:Elproveedordemapas.ActualmentelaAPIslosoportamapcity.
Country:Seleccindelpas.ActualmentesoportaChile(chile),Per(peru),Mexico(mexico),Brasil(brasil)y
Argentina(argentina)
Type:Tipodelmapa(dependedelprovider).Mapcitysoportavectorial(vector),guaMapCity(guide)yfotorea
(photo)
:LafotoreaestdisponiblesloenChileylaGuaMapcitysloenSantiagoylaQuintaRegin.
viewplain|print|?

1
2
3
4
5

varmap=newMapCity.Maps.map('map1',{
country:'chile'
,provider:'mapcity'
,type:'guide'
})

Movimentodelmapa
Estnimplementadaslasoperacionesbsicasdelmapa:
getCenter
http://api.mapcity.com/docs/tutorial.php

2/13

1/8/2015

MapCity API - Tutorial

getZoom
pan
panTo
setCenter
getScale
getZoomForExtent
zoomOut
zoomIn
zoomTo
zoomToExtent
zoomToMaxExtent
AgregandocontrolesalMapa
Loscontrolespermitenagregarfuncionalidadextraalmapa.LaAPIsoportatodosloscontrolesdeOpenLayersyadem
agregaalgunosespeciales.Porejemplo:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

varmap=newMapCity.Maps.map('map',{
country:'chile'
,provider:'mapcity'
,controls:[
newMapCity.Maps.Controls.ArrowMapNorth({north:true})
,newMapCity.Maps.Controls.ArrowMapSouth({south:true})
,newMapCity.Maps.Controls.ArrowMapEast({east:true})
,newMapCity.Maps.Controls.ArrowMapWest({west:true})
,newMapCity.Maps.Controls.ZoomBar()
,newMapCity.Maps.Controls.ScaleLine()
,newMapCity.Maps.Controls.Navigation({zoomWheelEnabled:false})
,newMapCity.Maps.Controls.SwitchMapBar({
vector:true
,photo:true
,guide:true
})
,newMapCity.Maps.Controls.ToolsBar({
measureline:true
,measurepolygon:true
,dragpan:true
,zoomin:true
,zoomout:true
,infostreet:true
,infogse:true
})
]
})

Ntesequeenelejemplosesobrescribielatributocontrols,porlotantoseeliminarontodosloscontrolespor
defecto.Sisequiereagregaruncontrolsineliminarlosyaagregadosuseelmdomap.addControl(control).
Enelejemploseusan2controlesespecialesMapCity.Maps.Controls.SwitchMapBary
MapCity.Maps.Controls.ToolsBar.Elprimeropermiteseleccionareltipodemapayelsegundoincluyelas
herramientasbsicasdelmapa.Observarquecadacontrolsepuedeconfigurarconliteralesigualqueelmapa.
AgregandoMarcadores
Unavezquesehacreadoelmapa,unadelastareasmscomunesesagregarmarcadoresconPopUp.LaAPIpermitehacerlo
http://api.mapcity.com/docs/tutorial.php

3/13

1/8/2015

MapCity API - Tutorial

usandoelmtododeOpenLayers:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

varicon=newMapCity.Maps.Icon(
'http://www.mapcity.com/images/logochico.jpg'
,newMapCity.Maps.Size(80,25)
)

varlonlat=MapCity.Locale.cities.get('santiago').lonlat

varmarker=newMapCity.Maps.Marker(
lonlat
,icon
)

map.addMarker(null,marker)

Elprimerparmetroeslacapadondesedibujaelmarker.Siesnull,sedibujaenlacapapordefecto.enelsiguienteejemplo
semuestracomocrearunacapa.Parausarunpopupconesteejemplo,sedebeagregarelpopupalmapayeleventoal
marker.Envezdeesto,espreferibleocuparelmtodosimpleprovistoporlaAPIquecreaelmarkeryelpopupenunasola
llamada:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

varicon=newMapCity.Maps.Icon(
'http://www.mapcity.com/images/logochico.jpg'
,newMapCity.Maps.Size(80,25)
)

varlonlat=MapCity.Locale.cities.get('santiago').lonlat

varmlayer=map.addLayer('testLayer','marker')

map.addPopUpMarker(
mlayer
,lonlat
,'<b>Prueba</b>HTML'
,icon
,true
,true
,MapCity.Maps.PopUp.FramedCloud
,true//PropiedadShow:Siestactivaelpopupsemuestraenformainmediata
)

Elpenltimoparmetrodefineeltipodepopup.LaAPIsoporta:
Anchored
AnchoredBubble
Framed
FramedCloud

http://api.mapcity.com/docs/tutorial.php

4/13

1/8/2015

MapCity API - Tutorial

Adems,elobjetoMapCity.Maps.mapsoportalossiguientesmtodos:
addMarker
removeMarker
removeAllMarkers
AgregandoGeometriasGeoreferenciadas
LaAPIpermiteagregargeometriasdefinidasenWKTalmapa.Laformamssimplees:
viewplain|print|?

1
2
3
4
5
6
7
8

varvlayer=map.addLayer('testLayer','vector')

varfeature=map.addFeatureWKT(
null
,'MULTILINESTRING((70.641926904509733.4487538416692,70.64225189517533.44751
)

Parausarunpopupalageometra,existeunmtodoprovistoporlaAPIquecrealageometrayelpopupenunasola
llamada:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11

varvlayer=map.addLayer('testLayer','vector')

varfeature=map.addPopUpFeatureWKT(
layer
,'MULTILINESTRING((70.641926904509733.4487538416692,70.64225189517533.4475146
,'<b>FeatureWKTPopUp</b>HTML'
,true
,true
,MapCity.Maps.PopUp.FramedCloud
,true//PropiedadShow:Siestactivaelpopupsemuestraenformainmediata
)

Elpenltimoparmetrodefineeltipodepopup.LaAPIsoporta:
Anchored
AnchoredBubble
Framed
FramedCloud
Adems,elobjetoMapCity.Maps.mapsoportalossiguientesmtodos:
removeAllFeatures
LlamadasaServiciosdeMapCity
LaAPIofreceunconjuntodeclasesquesimplificanelusodelosserviciosofrecidosporMapCity.
BsquedadeCalles
Elserviciodebsquedadecallesdevuelvelanormalizacinylageocodificacindeunacalle.Encasodeexistirmsdeuna
http://api.mapcity.com/docs/tutorial.php

5/13

1/8/2015

MapCity API - Tutorial

alternativa,seentregaunarreglodedirecciones.elsiguienteesunejemplodelusodeesteservicio:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

varsearchStreet=newMapCity.Services.Geocoding.searchStreet()

searchStreet.get({
street:'Carmen'
,number:'339'
,district:''
,region:'13'
,limit:10
untry:'chile'
}
,function(json,product,service){
//HacerAlgoconelretornoDireccionesRetornadas
}
)

elnicocampoobligatorioesstreet.Sisloseentregastreet,sebuscarausandoelformato"Callenmero,comuna".El
segundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
Service.AestafuncinseleentregarcomoparmetrolarespuestadelServicioenformatoJSON.Paraestecaso,tienela
siguienteestrcutura:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{"totalCount":7,"geocoding":[{"id":0,"district":"SANTIAGO","class":"CALLE","idStreet"
:"325080","name":"CARMEN","number":"339","region":"325080","lon":"70.6422636171245","lat":"33.448007
,"utmX":"347357.77562023","utmY":"6297826.46899508"},{"id":1,"district":"NUNOA","class":"CALLE",
:"316292","name":"CARMENCOVARRUBIAS","number":"339","region":"316292","lon":"70.6115576526468"
:"33.45645113230","utmX":"350226.599877587","utmY":"6296934.92532822"},{"id":2,"district":"MAIPU"
:"CALLE","idStreet":"300063","name":"CARMENLUISACORREA","number":"339","region":"300063","lon"
.761391032398","lat":"33.5116662849","utmX":"336403.747779704","utmY":"6290586.06892345"},{"id":3,"
:"SANJOAQUIN","class":"CALLE","idStreet":"280248","name":"CARMENMENA","number":"339","region":
,"lon":"70.6283705187456","lat":"33.51005021647","utmX":"348757.110901726","utmY":"6290967.131017"
},{"id":4,"district":"MELIPILLA","class":"CALLE","idStreet":"214917","name":"ELCARMEN","number"
,"region":"214917","lon":"71.1500158781588","lat":"33.64667305929","utmX":"300613.488235724","utmY"
:"6274933.0242643"},{"id":5,"district":"PAINE","class":"CALLE","idStreet":"202273","name":"DELCARMEN"
,"number":"339","region":"202273","lon":"70.7216645491735","lat":"33.80439408138","utmX":"340634.718
,"utmY":"6258186.93070667"},{"id":6,"district":"LAREINA","class":"CALLE","idStreet":"322095","name"
:"SALARDELCARMEN","number":"339","region":"322095","lon":"70.5347309720127","lat":"33.45558645971"
,"utmX":"357365.919964024","utmY":"6297138.91989145"}]}

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"searchstreet".Porltimo,elparmetrocountryindicaelpisdondeserealizarlabsqueda.Esopcional
ypordefectoesChile.Losvaloresposiblesosn:chile,argentina,peru,brasilymexico.
BsquedadeIntersecciones
Elserviciodebsquedadeinterseccionesdevuelvelanormalizacinylageocodificacindeunainterseccion.Encasode
existirmsdeunaalternativa,seentregaunarreglodedirecciones.elsiguienteesunejemplodelusodeesteservicio:
viewplain|print|?

http://api.mapcity.com/docs/tutorial.php

6/13

1/8/2015

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

MapCity API - Tutorial

varsearchStreet=newMapCity.Services.Geocoding.searchIntersection()

searchStreet.get({
street1:'SanSebastian'
,street2:'IsidoraGoynechea'
,district:''
,region:'13'
,limit:10
,country:'chile'
}
,function(json,product,service){
//HacerAlgoconelretorno
}
)

Elnicocampoobligatorioesstreet1ystreet2.Elsegundoparmetroparaelmtodogetcorrespondealafuncinquese
ejecutarcuandosefinalizelallamadaalWebService.Aestafuncinseleentregarcomoparmetrolarespuestadel
ServicioenformatoJSOn.Paraestecaso,tienelasiguienteestrcutura:
viewplain|print|?

1
2
3
4
5

{"totalCount":1,"searchintersection":[{"id":0,"classStreet1":"AVDA","nameStreet1":"VITACURA"
,"districtStreet1":"LASCONDES","lon":"70.6035191","lat":"33.4138132","utmX":"350900.823","utmY"
.408"}]}

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"searchintersection".Porltimo,elparmetrocountryindicaelpisdondeserealizarlabsqueda.Es
opcionalypordefectoesChile.Losvaloresposiblesosn:chile,argentina,peru,brasilymexico.
Informacindecalle
Elserviciodeinformacindecalledevuelvelainformacindelacallemscercanaaunpunto.Elsiguienteesunejemplo
delusodeesteservicio:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11

varstreetInfo=newMapCity.Services.Geocoding.streetInfo()

streetInfo.get({
lon:'70.642281434'
,lat:'33.4479398164'
}
,function(json,product,service){
//HacerAlgoconelretorno}
)

ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
Service.AestafuncinseleentregarcomoparmetrolarespuestadelServicioenformatoJSOn.Paraestecaso,tienela
siguienteestrcutura:
http://api.mapcity.com/docs/tutorial.php

7/13

1/8/2015

MapCity API - Tutorial


viewplain|print|?

1
2
3
4
5

{"totalCount":1,"searchintersection":[{"id":0,"classStreet1":"AVDA","nameStreet1":"VITACURA"
,"districtStreet1":"LASCONDES","lon":"70.6035191","lat":"33.4138132","utmX":"350900.823","utmY"
.408"}]}

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"streetinfo".
InformacindecalleporID
Elserviciodeinformacindecalledevuelvelainformacindelacalleporid(elidentregadoproelserviciosearchstreet).El
siguienteesunejemplodelusodeesteservicio:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10

varstreetInfoById=newMapCity.Services.Geocoding.streetInfoById()

streetInfoById.get({
idStreet:13243
}
,function(json,product,service){
//HacerAlgoconelretorno}
)

ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
Service.AestafuncinseleentregarcomoparmetrolarespuestadelServicioenformatoJSON.Paraestecaso,tienela
siguienteestrcutura:
viewplain|print|?

1
2
3
4
5

{"totalCount":1,"searchintersection":[{"id":0,"classStreet1":"AVDA","nameStreet1":"VITACURA"
,"districtStreet1":"LASCONDES","lon":"70.6035191","lat":"33.4138132","utmX":"350900.823","utmY"
.408"}]}

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"streetinfobyid".
Sugerencias
ElserviciodeSugerencias,entregasugerenciasparaunacalleincompleta.Elsiguienteesunejemplodelusodeeste
servicio:
viewplain|print|?

1
2
3
4
5

varsuggest=newMapCity.Services.Geocoding.suggest()

suggest.get({
street:'alam'

http://api.mapcity.com/docs/tutorial.php

8/13

1/8/2015

6
7
8
9
10
11
12
13
14

MapCity API - Tutorial

,district:'santiago'
,limit:'10'
}
,function(json,product,service){
//HacerAlgoconelretorno
}
)

Elparmetrodistrictesopcional,encasodeexistir,lassugerenciassefiltraranporcomuna.Elsegundoparmetroparael
mtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWebService.Aestafuncinsele
entregarcomoparmetrolarespuestadelServicioenformatoJSOn.Paraestecaso,tienelasiguienteestrcutura:
viewplain|print|?

1
2
3
4
5
6
7
8
9

{"totalCount":20,"suggest":[{"id":0,"street":"ALAMO"},{"id":1,"street":"ALAMOS"},{"id"
:2,"street":"ALAMEDA"},{"id":3,"street":"ALAMOALTO"},{"id":4,"street":"ELALAMO"},{"id":5,"street"
ALAMOS"},{"id":6,"street":"ELALAMEIN"},{"id":7,"street":"LAALAMEDA"},{"id":8,"street":"ALAMEDADOS"
},{"id":9,"street":"ALAMEDAUNO"},{"id":10,"street":"LUISALAMOS"},{"id":11,"street":"SIMONALAMO"
{"id":12,"street":"TRESALAMOS"},{"id":13,"street":"ALAMEDASEIS"},{"id":14,"street":"ALAMEDATRES"
,{"id":15,"street":"ALAMOHUACHO"},{"id":16,"street":"CARLOSALAMOS"},{"id":17,"street":"LAALAMBRADA"
},{"id":18,"street":"SERGIOALAMO"},{"id":19,"street":"ALAMEDACINCO"}]}

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"suggest".
SugerenciasdeComuna
ElserviciodeSugerencias,entregasugerenciasparaunacomunaincompleta.Elsiguienteesunejemplodelusodeeste
servicio:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13

varsuggest=newMapCity.Services.Geocoding.districtSuggest()

suggest.get({
district:'alam'
,limit:'10'
}
,function(json,product,districtsuggest){
//HacerAlgoconelretorno
}
)

ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
Service.AestafuncinseleentregarcomoparmetrolarespuestadelServicioenformatoJSOn.Paraestecaso,tienela
siguienteestrcutura:
viewplain|print|?

http://api.mapcity.com/docs/tutorial.php

9/13

1/8/2015

1
2
3
4
5
6

MapCity API - Tutorial

{"totalCount":10,"districtSuggest":[{"id":0,"district":"SANANTONIO"},{"id":1,"district"
:"SANBERNARDO"},{"id":2,"district":"SANCARLOS"},{"id":3,"district":"SANCLEMENTE"},{"id":4,"district"
:"SANESTEBAN"},{"id":5,"district":"SANFABIAN"},{"id":6,"district":"SANFELIPE"},{"id":7,"district"
:"SANFERNANDO"},{"id":8,"district":"SANIGNACIO"},{"id":9,"district":"SANJAVIER"}]}

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"districtsuggest".
BsquedadeComuna
ElserviciodeSugerencias,entregasugerenciasparaunacomunaincompleta.Elsiguienteesunejemplodelusodeeste
servicio:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13

varsuggest=newMapCity.Services.Geocoding.districtSuggest()

suggest.get({
district:'alam'
,simplify:0.0001
}
,function(json,product,districtsuggest){
//HacerAlgoconelretorno
}
)

Elparmetrosimplifyesopcionaleindicaquetansimplificadoserelpolgonoentregado.Elsegundoparmetroparael
mtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWebService.Aestafuncinsele
entregarcomoparmetrolarespuestadelServicioenformatoJSOn.Paraestecaso,tienelasiguienteestrcutura:
viewplain|print|?

1
2
3

{"totalCount":1,"searchdistrict":[{"id":0,"label":"LASCONDES","wkt":"MULTIPOLYGON(((70.4726700665622

Elparmetroproductyserviceesopcionalheindicaelproductoyservicoutilizadorespectivamente.Enestecaso
"geocoding"y"searchdistrict".
entorno
Elserviciodeentorno,entregaelentornoparauniddearcodecalle.Elsiguienteesunejemplodelusodeesteservicio:
viewplain|print|?

1
2
3
4
5

varenviroment=newMapCity.Services.Geocoding.enviroment()

enviroment.get({
idArco:'324983'

http://api.mapcity.com/docs/tutorial.php

10/13

1/8/2015

6
7
8
9
10
11

MapCity API - Tutorial

}
,function(json){
document.getElementById('status_enviroment').innerHTML='enviromentOK:wkt='
}
)

ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
Service.AestafuncinseleentregarcomoparmetrolarespuestadelServicioenformatoJSOn.Paraestecaso,tienela
siguienteestrcutura:
viewplain|print|?

1
2
3
4
5
6

{"totalCount":1,"enviroment":[{"id":0,"id_nombre_calle":"13399","clase_calle":"CALLE"
,"region":"13.0000000000","calle_perp_1":"ROOT","calle_perp_2":"MARIN","calle_para_1":"MANUELANTONIO
TOCORNAL","calle_para_2":"SANISIDRO","avda_perp_1":"LIBERBERNARDOO`HIGGINS","avda_perp_2":"DIEZDE
JULIOHUAMACHUCO","avda_para_1":"STAROSA","avda_para_2":"PORTUGAL","ornt_avda_perp_1":"sur","ornt_avd
:"poniente","ornt_avda_para_1":"oriente","ornt_avda_para_2":"70.6423233213351","mid_arco_x":"oriente"
,"mid_arco_y":"70.6423233213351"}]}

Widgets
LosWidgetssimplificaneldesarrollodecomponentesdeinterfazgrficaspotenciadosporlosserviciosdeMapCity,
transformandocomponentesHTMLestndardencomponentesAJAX.
ComboBoxparaBsquedadeCalles
Elcomboboxparabsquedadecalles,transformauntextboxhtmlyunbotnhtmlenuncomboboxdebsquedadecalles
consugerencias.ElHTMLeselsiguiente:
viewplain|print|?

1
2
3
4
5

<formid="simple">
<inputid="search"type="text"/><inputid="action_search"type="button"value="buscar"/>
</form>
<divid='resultados'>
</div>

yeljavascriptelsiguiente:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10

varsearch=newMapCity.Widgets.SearchComboBox({
input:'search'
,action:'action_search'
,width:300
.height:10
,before:function(){}
,actionCallback:function(json,product,service){

}
})

ComboBoxparaBsquedaAvanzadadeCalles

http://api.mapcity.com/docs/tutorial.php

11/13

1/8/2015

MapCity API - Tutorial

Elcomboboxparabsquedadecalles,transforma4textboxhtmlyunbotnhtmlenuncomboboxdebsquedadecalles
consugerencias.Elbuscadoravanzadotienebuscadorporcalle,pordireccin,porinterseccinyporcomuna.Dependiendo
decualseutilizo,eselproductoytipoentregadoalafuncinactionCallback.Lostiposdebsquedasonlossiguientes:
PorCalle:Sislosellenaelcampocalle,serealizarunabsquedadecalleusandoelproductogeocodingyel
serviciosearchstreet
Pordireccin:Sisellenaelcampocalleyaltura,serealizarunabsquedadedireccinusandoelproducto
geocodingyelserviciosearchstreet.sifallayestaexisteunvalorparalainterseccin,sebscarausandoelproducto
geocodingyseachintersection
PorComuna:Sislosellenaelcampocomuna,serealizarunabsquedadecalleusandoelproductogeocodingy
elserviciosearchdistrict
Paraeljsonretornadoporcadabsqueda,verLlamadasaServiciosdeMapCity.Adems,siexistecomunacuandose
ingresauncalle,lasugerenciasersobrelascallesqueexistenenlacomuna.ElHTMLeselsiguiente:
viewplain|print|?

1
2
3
4
5
6

<formid="avanzada">
<inputid="a_street"type="text"/><inputid="a_number"type="text"/><inputid="a_intersection"type
<inputid="action_a_search"type="button"value="buscar"/>
</form>
<divid='a_resultados'>
</div>

yeljavascriptelsiguiente:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

varsearch=newMapCity.Widgets.AdvancedSearchComboBox({
street:'a_street'
,number:'a_number'
,district:'a_district'
,intersection:'a_intersection'
,action:'action_a_search'
,widthStreet:300
,widthDistrict:300
,widthIntersection:300
,before:function(){}
,actionCallback:function(json,product,service){

}
})

ComboBoxparaBsquedadeIntersecciones
Elcomboboxparabsquedadecalles,transforma2textboxhtmlyunbotnhtmlenuncomboboxdebsquedadecalles
consugerencias.ElHTMLeselsiguiente:
viewplain|print|?

1
2
3
4
5
6

<formid="interseccion">
<inputid="i_street1"type="text"/><inputid="i_street2"type="text"/>
<inputid="action_i_search"type="button"value="buscar"/>
</form>
<divid='i_resultados'>
</div>

http://api.mapcity.com/docs/tutorial.php

12/13

1/8/2015

MapCity API - Tutorial

yeljavascriptelsiguiente:
viewplain|print|?

1
2
3
4
5
6
7
8
9
10

varsearch=newMapCity.Widgets.IntersectionSearchComboBox({
street1:'i_street1'
,street2:'i_street2'
,action:'action_i_search'
,width:300
,before:function(){}
,actionCallback:function(json){

}
})

Resolucindeproblemas
Enviarunmailconlaconsultaaapi@mapcity.com

http://api.mapcity.com/docs/tutorial.php

13/13

Вам также может понравиться