腾讯地图

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=RERBZ-5KZK6-RK2SK-MUH7J-H2YI7-BGBBW"></script>
<style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    body, button, input, select, textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }
    p{
        width:603px;
        padding-top:3px;
        overflow:hidden;
    }
    #container {
        min-width:603px;
        min-height:767px;
    }
</style>

<div class="col-md-6">
                    <div class="form-group" id="search">
                        <label>店铺地址</label>
                        <input class="form-control" id="address" name="address" placeholder="请输入地址" value="" type="text">
                        <input type="button" value="搜索" id="btn">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>地图</label>
                        <div id="container"></div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group" >
                        <label>店铺gps</label>
                        <input class="form-control" id="gps"  name="gps" placeholder="" value="" type="text" readonly>
                        <span>点击地图获取经纬度</span>
                    </div>
                </div>

<script>
    //初始化地图
    $(function () {
        var map = maps();
        click(map);//点击事件调用递归函数
    });

    function maps()
    {
        var center = $("#gps").val();
        if(center == ''){
            center = '39.916527,116.397128';
        }
        var parseCenter = new Array();
        parseCenter = center.split(",");
        //console.log(parseCenter);
        var map = new qq.maps.Map(document.getElementById("container"),{
            center: new qq.maps.LatLng(parseCenter[0],parseCenter[1]),
            zoom: 13
        });

        //创建marker
        var marker = new qq.maps.Marker({
            map:map,
            position:new qq.maps.LatLng(parseCenter[0],parseCenter[1])
        });

        return map;

    }

    //点击地图事件递归函数
    function click(map) {
        qq.maps.event.addListener(map, 'click', function(event) {
            var lat = event.latLng.getLat();
            var lng = event.latLng.getLng();
            lat = lat.toFixed(6);
            lng = lng.toFixed(6);
            $("#gps").val(lat+','+lng);
            map = maps();
            click(map);
        });
    }

    //点击地址搜索按钮获取地址信息
    $('#btn').on('click',function () {
        //调用函数
        var address = $("#address").val();
        getAddress(address);
    });

　　　//传入地址信息，点击搜索按钮查询出gps经纬度
    function getAddress(address){
        $.ajax({
            type:'get',
            url:'http://apis.map.qq.com/ws/geocoder/v1/?address='+address+'&key=RERBZ-5KZK6-RK2SK-MUH7J-H2YI7-BGBBW&output=jsonp',
            dataType:'jsonp',
            jsonp:'callback',
            success:function(data) {
                var posi=data.result.location;
                //alert(posi.lat);
                //console.log(posi);
                var map = new qq.maps.Map(document.getElementById("container"),{
                    center: new qq.maps.LatLng(posi.lat,posi.lng),
                    zoom: 13
                });
                var center = new qq.maps.LatLng(posi.lat,posi.lng);
                //创建marker
                var marker = new qq.maps.Marker({
                    map:map,
                    position:center
                });
                $("#gps").val(posi.lat+','+posi.lng);
                click(map);
            },
            error:function() {
                alert('fail');
            }

        });
    }
</script>

标签：qq,map,posi,地图,maps,腾讯,var,new
来源： https://www.cnblogs.com/computer-technology/p/11962719.html