Thinkcmf后台增加经纬度获取

心已赠人 2023-03-12 09:09 5阅读 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 条评论，5人围观）

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

相关阅读

相关 Android 获取经纬度。

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

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

相关 android获取经纬度代码

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

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

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

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

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

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

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

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

相关 vue 后台管理系统引入地图选点插件获取经纬度

地图插件文档：[https://elemefe.github.io/vue-amap/\/][https_elemefe.github.io_vue-amap]

小灰灰/ 2022年11月20日 00:59/ 0 赞/ 311 阅读

相关通过经纬度获取位置信息

位置信息的获取，有很多方法。这里只使用了HttpURLConnection中的GET方式访问第三方地图接口，获取实时位置，这里是通过申请百度地图访问接口调试使用。感觉精度一般，

￡神魔★判官ぃ/ 2022年09月05日 00:22/ 0 赞/ 276 阅读

相关获取一个地点的经纬度

获取一个地点的经纬度项目的需要，已知一个地名，想知道其经纬度，之前想过的办法之一就是在那里拍一张照片，然后从照片详细信息中找到位置信息，也就是经纬度（间接的

分手后的思念是犯贱/ 2022年06月14日 02:15/ 0 赞/ 257 阅读

相关获取当前经纬度坐标

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

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

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

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

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

相关输入地址获取经纬度坐标

<input class="inputAll" type="text" placeholder="请填写校区地址" name="campusAddr" value="$

向右看齐/ 2021年07月25日 02:10/ 0 赞/ 718 阅读