APP开发公司怎样解决用户自定义的地理定位？提供以地理位置服务的应用程序，有时候需要用户自主选择当前地理位置。深圳APP开发公司本例演示通过用户选择或者输入一个地名，去获取其地名的地理位置信息。当用户打开浏览器，点击“某一个地名”标签，或者在“文本框”中输入地名，然后点击“定位”按钮，网页程序就会根据查找的结果显示其地理位置信息。使用Chrome浏览器打开“用户自己定义的地理定位”网页文件，运行效果如图4.16所示。
在城市列表中点击“杭州”标签，运行效果如图4.17所示。
在“文本框”中输入“西溪湿地”，然后点击“定位”按钮，运行效果如图4.18所示。
利用编辑器打开“4-4.用户自定义的地理定位.html”文件，代码如下：
【代码4-4】
【代码4-4】
01 < blockquote> 02 < p> 用户 自定义 的 地理 定位</ p> 03 </ blockquote> 04 < h3> 初始化 中</ h3> 05 < div id=" mapInfo" class=" mapInfo"></ div> <!-- 坐标 显示 控 件 --> 06 < div class=" citylist"> 07 < p> 初始化 系统， 请 先 选择 一个 地点</ p> 08 < a href=" javascript:;" title=" 北京" class=" ad"> 北京</ a>
09 < a href=" javascript:;" title=" 上海" class=" ad"> 上海</ a> 10 < a href=" javascript:;" title=" 杭州" class=" ad"> 杭州</ a> 11 < a href=" javascript:;" title=" 成都" class=" ad"> 成都</ a> 12 < a href=" javascript:;" title=" 深圳" class=" ad"> 深圳</ a> 13 ... 14 < br>< br> 15 或者， 您也 可以 从 输入 一个 地名 开始：< input type=" text" name=" address" id=" address" /> 16 < button class=" btn btn- mini" href=" javascript:;" id=" searchBtn"> 定位 </ button> 17 </ div> 18 < div class=" item"> 19 < div id=" process"></ div> <!-- 定位 进度 显示 控 件 --> 20 < div id=" map" class=" map"></ div> <!-- 地图 显示 控 件 --> 21 </ div>
第07～12行定义了城市列表。用户可以从城市列表中选择一个城市，当用户点击城市名称标签时，程序会获取当前点击的城市名称，根据该城市名搜索其地理位置信息，然后自动定位到所选择的城市。设置列表链接控件a的class属性为ad，可以方便为JavaScript提供DOM查找。
第15～16行代码设置一个文本输入控件，用户可以自己输入地名或者城市名，当用户点击“定位”按钮时，程序会根据当前输入的地名定位当前地理位置信息，如果定位失败，则给出提示。第19～20行代码分别设置了当前定位的进度提示和显示地图信息的控件，JavaScript部分代码设计如下：01 // 定义 全局 变量 02 var map, // 地图 对象 03 gLocalSearch, // Google 地图 搜索 对象 04 address, // 用户 自定义 定位 文本 05 mapInfo, // 显示 地理 位置 坐标 06 processDiv; // 定位 状态 过程 提醒 07 function init(){ // 初始化 Google 地图 08 map = new google. maps. Map( document. getElementById(" map"), { // Google 地图 实例 化 09 zoom: 3, 10 center: new google. maps. LatLng( 35. 86166, 104. 195397), // 设置 默认 中国 地图 坐标
11 mapTypeId: google. maps. MapTypeId. ROADMAP 12 }); 13 map. getDiv(). style. border = '1px solid #ccc'; 14 gLocalSearch = new GlocalSearch(); // 实例 化 GlocalSearch 15 gLocalSearch. setSearchCompleteCallback( null, showPosition); // 设置 搜索 结果 的 回 调 函数 16 17 } 18 function showMap( coords){ // 通过 经纬度 显示 地图 19 var latLng = new google. maps. LatLng( coords. latitude, coords. longitude);// 设置 坐标 标记 20 var marker= new google. maps. Marker({ position: latLng, map: map }); // 在 地图 上 显示 标记 21 map. setCenter( latLng); // 设置 当前 坐标 居中 22 map. setZoom( 15) // 设置 地图 放大 15 倍 23 } 24 function showPosition(){ 25 var first = gLocalSearch. results[ 0]; // 获取 第一个 搜索 结果
26 if( first){ 27 showProcess(); // 搜索 进度 搜索 完成 28 showMap({ latitude: first. lat, longitude: first. lng}); // 显示 地图 29 mapInfo. html(" 经度：" + first. lat + "<br> 纬度：" + first. lng); // 显示 经纬度 30 }else{ // 定位 失败 处理 31 mapInfo. html(""); 32 showProcess(" 对不起， 找 不到 该地 点， 请 检查 您的 输入 是否 有 误！"); 33 } 34 } 35 function showProcess( msg) // 显示 定位 进度 36 msg = msg || ''; 37 processDiv. html( msg); // 打印 出 当前 进度 38 } 39 function seach( keyword){ 40 gLocalSearch. execute( keyword); 41 } 42 $( function(){
43 var bind = function(){ // 设置 事件 绑 定 函数 44 $(". ad"). bind(" click", function( e){ // 城市 列表 标签 绑 定点 击 事件 45 var keyword = $( this). text(); // 获取 城市 名称 46 showProcess(' 正在 定位 中...'); 47 seach (keyword); // 执行 搜索 48 }); 49 $("# searchBtn"). bind(" click", function(){ // 输入 文本 定位 事件 绑 定 50 var keyword = address. val(); 51 showProcess(' 正在 定位 中...'); 52 seach (keyword); // 执行 搜索 53 }); 54 } 55 address = $("# address"); // 获取 文本 框 DOM 对象 56 processDiv = $("# process") // 获取 进度 状态 DOM 对象 57 mapInfo = $("# mapInfo"); // 获取 地理 位置 信息 DOM 对象 58 init();
// 程序 初始化 59 bind(); // 调用 事件 绑 定 函数 60 });
第02～06行代码定义了5个全局变量，map和gLocalSearch这两个变量只需要初始化一次，但在多个地方调用（在本例中showMap和search函数调用）可以把变量作用域提升，减少重复实例化次数；另外3个变量保存DOM节点信息，在代码第55～57行进行初始化，把作用域提升是为了不用重复获取查询开销较大的DOM节点。
第07～17行代码初始化全局变量map和gLocalSearch。地图初始化默认为中国。初始化gLocalSearch，指定其回调函数为showPosition。
第07～17行代码初始化全局变量map和gLocalSearch。地图初始化默认为中国。初始化gLocalSearch，指定其回调函数为showPosition。
第18～23行定义显示地图的函数，接收1个经纬度信息的对象。
第24～34行定义gLocalSearch回调函数的具体实现，当gLocalSearch的excute函数执行完成时调用这个函数。
第25行通过gLocalSearch的results属性获取搜索结果的第1个返回值。当定位成功时，results数组里包含了一组搜索结果，这里将获取第1个结果，因为第1个结果一般最精确。当定位不成功时，results为1个空数组，有兴趣可以打印出其值来，里面包含了非常丰富的地理位置信息。好了，APP开发公司本文关于“怎样解决用户自定义的地理定位？”的相关APP制作定位解决方案就分享到这里，谢谢关注，博纳网络编辑整理。
第24～34行定义gLocalSearch回调函数的具体实现，当gLocalSearch的excute函数执行完成时调用这个函数。
第25行通过gLocalSearch的results属性获取搜索结果的第1个返回值。当定位成功时，results数组里包含了一组搜索结果，这里将获取第1个结果，因为第1个结果一般最精确。当定位不成功时，results为1个空数组，有兴趣可以打印出其值来，里面包含了非常丰富的地理位置信息。好了，APP开发公司本文关于“怎样解决用户自定义的地理定位？”的相关APP制作定位解决方案就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3131.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
