thinkphp5 后台前端使用高德地图获取位置信息

 

<div class="layui-form-item">
    <label class="layui-form-label">
        地址
    </label>
    <div class="layui-input-block">
        <input id="search" type="text" value="{$franchisee.address|default=''}" name="address"  placeholder="请输入地址" autocomplete="off" class="layui-input">
        <input id="lat" type="text" value="{$franchisee.latitude|default=''}" name="latitude"  placeholder="请输入纬度" autocomplete="off">
        <input id="lng" type="text" value="{$franchisee.longitude|default=''}" name="longitude"  placeholder="请输入经度" autocomplete="off">
        <div id="g-map" style="height: 500px;"></div>
    </div>
</div>

<!--高德地图-->
<!-- key 需要自己审请一个-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=自己申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.CitySearch,AMap.Geolocation,AMap.Geocoder"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>

<script type="text/javascript">
    var map,addMarker;
    var geocoder;
    var placeSearch;

    var lat = "{$franchisee.latitude|default='23.153608'}";
    var lng = "{$franchisee.longitude|default='113.325996'}";
    map = new AMap.Map('g-map', {
        resizeEnable: true,
        center: [lng,lat],
        zoom:16,//级别
    });

    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
    position: new AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
    map.on('click', function(e) {
        map.remove(marker);
    });

    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
        $("input[name='m_point']").val(e.lnglat.getLng() + ',' + e.lnglat.getLat());
        $("input[name='latitude']").val(e.lnglat.getLat());
        $("input[name='longitude']").val(e.lnglat.getLng());

        var lat = "{$franchisee.latitude|default='23.107563'}";
        var lng = "{$franchisee.longitude|default='109.598971'}";
        // 创建一个 Marker 实例：
        var marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
    map.on('click', function(e) {
        // 移除已创建的 marker
        map.remove(marker);
    });

    var geocoder; 
    var lnglatXY=new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat()); 

    //加载地理编码插件 
    map.plugin(["AMap.Geocoder"],function(){  
        geocoder=new AMap.Geocoder({ 
        radius:1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息 
        extensions: "all"//返回地址描述以及附近兴趣点和道路信息，默认"base" 
    }); 

    //返回地理编码结果 
    AMap . event . addListener(geocoder, "complete",geocoder_CallBack); 
        //逆地理编码 
        geocoder.getAddress(lnglatXY); 
    });

    //地理编码返回结果展示  
    function geocoder_CallBack(data){
        console.log(data,'kkkkk');
        var resultStr="";
        //地理编码结果数组
        var geocode = new Array();
        geocode = data.geocodes; 
        $("input[name='address']").val(data.regeocode.formattedAddress);
    }
});

    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });

    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }

    AMap.plugin('AMap.Autocomplete', function(){
        // 实例化Autocomplete
        var autoOptions = {
        // input 为绑定输入提示功能的input的DOM ID
        input: 'search'
    }
    var autoComplete= new AMap.Autocomplete(autoOptions);
        // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
        var placeSearch = new AMap.PlaceSearch({
            city:'广州',
            map:map
        })
        AMap.event.addListener(autoComplete, 'select', function(e){
            //TODO 针对选中的poi实现自己的功能
            placeSearch.search(e.poi.name)
        })
    })

</script>