Thinkcmf后台增加经纬度获取

系统自带的方法

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回调，需进行手工关闭
            }
        }
    );
}

之前的写法

有时候程序里面需要保存通过经纬度来保存地理位置。

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>