地图页面开发流程

地图页面开发流程：（该文档建议用web模式查看）准备高德地图插件，申请成为高德地图开发者---/点击获取key填入应用名称（不用跟项目名称保持一致），选择Android平台 SDK，安全码为：49:3E:52:87:09:E1:B4:D2:B8:FF:12:6E:2C:C8:40:6D:3B:5E:4D:BBPackage为自定义包名（遵循DNS反转规则即可，com.xxx.xxx）项目最终打包时需要填入这个自定义包名，必须保持一致。即可获取到key值，如下图中选中区域：将key值填入到uexGaodeMap插件目录下的AndroidManifest.xml文件中的android:value="$uexGaodeMap_APIKey$"（黄色区域）如下图（选中区域）：最后保存并上传自定义插件即可。2.需求分析：1）用户可以搜索，在地图上添加标注并以搜索点为地图中心2）可以显示用户当前位置并在地图上添加标注并以该点为地图中心3）可以切换实时路况4）可以切换地图实景3.开发过程新建一个页面（test.html），选择头部栏带输入框的，如下图：删除test_content.html页面，修改test.html中的头部栏，自定义按钮样式.my-btn{ min-height:2em; min-width:3em; display:-webkit-box!important; display:box!important; position:relative; -webkit-box-align:center; box-align:center; -webkit-box-pack:center; box-pack:center;}<divid="header"class="uhbc-text-headubbc-head"><divclass="my-btn"id="back"><divclass="fafa-angle-leftfa-2x"></div></div><divclass="uinnub-f1"><divclass="sc-bg-activeuinputubub-f1bc-borderubauc-a1"><divclass="uinnfafa-searchsc-text"></div><inputid="input"type="text"class="ub-f1"value=""></div></div><divclass="my-btn"id="search"><divclass="fafa-searchfa-yb"></div></div></div>添加底部栏：<divid="footer"class="uhbc-text-headubbc-headuinn"> <divclass="my-btnub-f1"id="btn1"><divclass="fafa-globefa-2x"></div></div><divclass="my-btnub-f1"id="btn2"><divclass="fafa-map-markerfa-2x"></div></div><divclass="my-btnub-f1"id="btn3"><divclass="fafa-location-arrowfa-2x"></div></div></div>页面效果如图所示：在content中打开地图，在appcan.ready{}中调用openMap(X,Y)方法SetZoomLevel()方法，设置打开地图的缩放级别其中XY为打开地图的中心点的经纬度functionopenMap(X,Y){varxCoordinate=0;varyCoordinate=$('#header').offset().height;varwidth=$('#content').offset().width;varheight=$('#content').offset().height;varparams={left:xCoordinate,top:yCoordinate,width:width,height:height,longitude:X,latitude:Y};vardata=JSON.stringify(params);uexGaodeMap.open(data);}functionsetZoomLevel(){varparams={level:15};vardata=JSON.stringify(params);uexGaodeMap.setZoomLevel(data);}为头部栏的back，search按钮和底部栏的btn1，btn2，btn3按钮绑定点击事件 appcan.button(".my-btn","ani-act",function(){switch(this.id){case"btn1":setMapStyle();break;case"btn2":getCurrentLocation();break;case"btn3":setTrafficEnable();break;case"back":appcan.window.close(-1);closeMap();break;case"search":varinput=document.getElementById("input").value;varcity=appcan.locStorage.val('city');if(input==null||input==""){}else{getGeocode(city,input);}break;} })定义setMapStyle()getCurrentLocation()setTrafficEnable()closeMap()getGeocode(city,input)functiongetCurrentLocation(){uexGaodeMap.getCurrentLocation();}varflag=0;functionsetTrafficEnable(){flag++;if(flag%2!=0){varparams={type:1};vardata=JSON.stringify(params);uexGaodeMap.setTrafficEnabled(data);}else{varjsonStr={type:0};vardataType=JSON.stringify(jsonStr);uexGaodeMap.setTrafficEnabled(dataType);}}functioncloseMap(){uexGaodeMap.close();}functiongetGeocode(city,address){varjsonstr={city:city,address:address};vardata=JSON.stringify(jsonstr);uexGaodeMap.geocode(data);}varchange=0;functionsetMapStyle(){change++;if(change%2!=0){vartypeOne={type:2};vardataOne=JSON.stringify(typeOne);uexGaodeMap.setMapType(dataOne);}else{vartypeTwo={type:1};vardataTwo=JSON.stringify(typeTwo);uexGaodeMap.setMapType(dataTwo);} }其中uexGaodeMap.geocode(data)和uexGaodeMap.getCurrentLocation();有回调方法，在appcan.ready{}中定义uexGaodeMap.cbGeocode=function(data){searchAddressObj=eval('('+data+')');setCenter(searchAddressObj.longitude,searchAddressObj.latitude);addMark(searchAddressObj.longitude,searchAddressObj.latitude);}uexGaodeMap.cbGetCurrentLocation=function(data){userAddressObj=eval('('+data+')');varlongitude=userAddressObj.longitude;varlatitude=userAddressObj.latitude;setCenter(longitude,latitude);addMark(longitude,latitude);varparams={type:2}vardata=JSON.stringify(params);uexGaodeMap.setUserTrackingMode(data);}setZoomEnable();定义setCenter(longitude,latitude)addMark(longitude,latitude) setZoomEnable()方法 functionsetCenter(longitude,latitude){varparams={ longitude:longitude, la