Thinkcmf后台增加经纬度获取

心已赠人 2023-03-12 09:09 24阅读 0赞

系统自带的方法

### html ###

<div class="form-group">
        <label class="col-sm-2 control-label" for="location">
            地理坐标                </label>
        <div class="col-md-6 col-sm-10">
            <input class="form-control" name="config[location]" id="location" value="117.305305,36.416332" onclick="doSelectLocation(this)" data-title="请选择地理坐标">
                                    <p class="help-block">这是地理坐标组件的演示</p>
                            </div>
    </div>

### js ###

function doSelectLocation(obj) { 
        var $obj       = $(obj);
        var title      = $obj.data('title');
        var $realInput = $obj;
        var location   = $realInput.val();
    
        parent.openIframeLayer(
            "/admin/dialog/map.html?location=" + location,
            title,
            { 
                area: ['700px', '90%'],
                btn: ['确定', '取消'],
                yes: function (index, layero) { 
                    var iframeWin = parent.window[layero.find('iframe')[0]['name']];
                    var location  = iframeWin.confirm();
                    $realInput.val(location.lng + ',' + location.lat);
                    //$obj.val(location.address);
                    parent.layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            }
        );
    }

之前的写法

有时候程序里面需要保存通过经纬度来保存地理位置。  
![获取经纬度][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg5ODQ5_size_16_color_FFFFFF_t_70]  
html代码

<div class="form-group">
       <label class="col-sm-2 control-label"><span class="form-required">*</span>门店地址:</label>
        <div class="col-md-6 col-sm-10">
            <input type="text" class="form-control" name="address" value="" >
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label"><span class="form-required">*</span>经度:</label>
        <div class="col-md-2 col-sm-2">
            <input type="text" class="form-control" id="longitude" name="longitude" value="">
        </div>
        <label class="col-sm-1 control-label"><span class="form-required">*</span>纬度:</label>
        <div class="col-md-2 col-sm-2">
            <input type="text" class="form-control" id="latitude" name="latitude" value="">
        </div>
        <a href="javascript:doSelectAddress();" class="col-sm-1">获取经纬度</a>
    </div>
    <div class="form-group" id="map" style="display:none;">
        <label class="col-sm-2 control-label">地址</label>
        <div class="col-md-6 col-sm-10">
            <div class="input-group">
                <input type="text" id="address" class="form-control" value="">
                <span class="input-group-btn">
                        <button type="button"  id="mapseacrh" class="btn btn-primary">搜索</button></span>
            </div>
            <span class="help-block m-b-none"> 地图上选自己公司的位置会自动获取到你的经纬度</span>
            <div id="container" style="width:100%;height:500px;"></div>
        </div>
    </div>

js代码  
注意：需要先去腾讯地图开发者获取秘钥

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=腾讯地图开发者的秘钥"></script>
    <script src="http://open.map.qq.com/apifiles/2/4/79/main.js" type="text/javascript"></script>
    <script>
    	function doSelectAddress() { 
            $('#map').toggle()
        }
        $(function(){ 
    
            var geocoder,citylocation,map,marker = null;
            var markersArray=[];
    
            //获取坐标，得到中心点
            var x=$("#longitude").val();
            var y=$("#latitude").val();
            var center = new qq.maps.LatLng(y,x);
    
            map = new qq.maps.Map(document.getElementById('container'),{ 
                center: center,
                zoom: 13
            });
    
            geocoder = new qq.maps.Geocoder({ 
                complete : function(result){ 
                    map.setCenter(result.detail.location);
                    var marker = new qq.maps.Marker({ 
                        map:map,
                        position: result.detail.location
                    });
                }
            });
    
            marker = new qq.maps.Marker({ 
                position: new qq.maps.LatLng(y,x),
                map: map
            });
    
            //获取城市列表接口设置中心点
            if(y==''||x==''){ 
                citylocation = new qq.maps.CityService({ 
                    complete : function(result){ 
                        map.setCenter(result.detail.latLng);
                    }
                });
                //调用searchLocalCity();方法 根据用户IP查询城市信息。
                citylocation.searchLocalCity();
            }
    
    
            //绑定单击事件添加参数
            qq.maps.event.addListener(map, 'click', function(event) { 
                marker.setMap(null);
                $("#longitude").attr("value","");
                $("#longitude").attr("value",event.latLng.getLng());
                $("#latitude").attr("value","");
                $("#latitude").attr("value",event.latLng.getLat());
                marker=new qq.maps.Marker({ 
                    position:new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng()),
                    map:map
                });
            });
    
            geocoder = new qq.maps.Geocoder({ 
                complete : function(result){ 
                    marker.setMap(null);
                    map.setCenter(result.detail.location);
                    marker = new qq.maps.Marker({ 
                        map:map,
                        position: result.detail.location
                    });
                    $("#latitude").attr("value",marker.position.lat);
                    $("#longitude").attr("value",marker.position.lng);
                }
            });
    
    
            $("#mapseacrh").click(function(){ 
                var address =$("#address").val();
                //通过getLocation();方法获取位置信息值
                geocoder.getLocation(address);
            });
    
        });
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg5ODQ5_size_16_color_FFFFFF_t_70]: /images/20230312/e087e2161ff84adabab65e716897373f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 获取经纬度。

1。添加权限 AndroidManifest.xml <uses-permission android:name="android.permission.ACCESS\_F

小灰灰/ 2024年02月19日 16:08/ 0 赞/ 94 阅读

相关 Android 自动获取经纬度，计算距离、经纬度、方位角

最近做一个项目需要通过GPS获取经纬度，通过计算算出两点之间的距离。通过对Google和百度的疯狂轰炸，终于找到了解决的办法。首先声明权限: android:name="

电玩女神/ 2023年10月16日 18:48/ 0 赞/ 30 阅读

相关 android获取经纬度代码

android 4.4上如何获取经纬度信息由于Android对于APN的网络API没有公开，不过我们可以阅读源代码，然后进行数据库操作，系统会自动监听数据库的变化，从而

悠悠/ 2023年09月25日 11:24/ 0 赞/ 168 阅读

相关根据经纬度获取地理位置和根据地址获取经纬度

1，根据高德地图获取位置 public function getLocation($params) { $params['lo

逃离我推掉我的手/ 2023年06月30日 12:54/ 0 赞/ 27 阅读

相关经纬度(wgs)并且根据经纬度获取城市

var obj={}; // 根据经纬度(wgs)并且根据经纬度获取城市(h5plus) getWarpweft(){ un

淡淡的烟草味﹌/ 2023年06月29日 15:59/ 0 赞/ 10 阅读

相关 ThinkCMF后台页面模板demo

index列表页面模板 <include file="public@header"/> </head> <body> <!--页面内容--

秒速五厘米/ 2023年06月18日 11:55/ 0 赞/ 18 阅读

相关 Thinkcmf后台增加经纬度获取

系统自带的方法 html <div class="form-group"> <label class="col-sm-2 control-lab

心已赠人/ 2023年03月12日 09:09/ 0 赞/ 25 阅读

相关根据经纬度获取地区名称，根据地区名称获取经纬度

import org.codehaus.jettison.json.JSONException; import org.codehaus.jetti

刺骨的言语ヽ痛彻心扉/ 2023年03月01日 10:30/ 0 赞/ 234 阅读

相关获取当前经纬度坐标

封装好的代码如下： function getPosition () { return new Promise((resolve, reject) => {

逃离我推掉我的手/ 2022年06月05日 02:38/ 0 赞/ 405 阅读

相关通过地址获取经纬度和通过经纬度获取地址

1、通过地址获取该地址的经纬度 / @param addr 查询的地址 @return

淩亂°似流年/ 2021年11月22日 07:58/ 0 赞/ 599 阅读