高德地图选择地理位置

高德官方文档:  http://lbs.amap.com/api/javascript-api/example/amap-ui-positionpicker/position-picker

官方详情说明:  http://lbs.amap.com/api/javascript-api/reference-amap-ui/other/positionpicker

商家注册代码如下:

<tr>
    <th><i>*</i>详细地址:</th>
    <td>
    <input name="address" id="address" class="w200" type="text"   value="{$supplier.address}" />
<a onclick="getMap()" style="width: 52px;height: 25px;display: inline-block;border: 1px solid #ccc;text-align: center;border-radius: 5px;cursor: pointer;">查看地图</a>
<a onclick="closeMap()" style="width: 52px;height: 25px;display: inline-block;border: 1px solid #ccc;text-align: center;border-radius: 5px;cursor: pointer;">关闭</a>
        <span></span><font color="red">注:点击查看地图后,拖动蓝色定位标获取经纬度</font>
</td>
</tr>
<tr id='latlng'>
    <th><i>*</i>经纬度:</th>
    <td>
        <input type="text" readonly="readonly" name="str_lng" id="lng" size=45 value="{if $supplier.lng}{$supplier.lng}{else}0.000000{/if}" class="w200" />
        <input type="text" readonly="readonly"  name="str_lat" id="lat" size=45 value="{if $supplier.lat}{$supplier.lat}{else}0.000000{/if}" class="w200"  />
</td>

 </tr>

<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.6&key='自己的key'&plugin=AMap.ToolBar'></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> 
function closeMap(){
$('#allmap').hide();
}
function getMap(){
$('#allmap').show();
    if($("#lat").val()!='0.000000'){
        return;
    }
    var selCountries_1 = $("#selCountries_1").find("option:selected").text();
    var selProvinces_1 = $("#selProvinces_1").find("option:selected").text();
    var selCities_1 = $("#selCities_1").find("option:selected").text();
    var selDistricts_1 = $("#selDistricts_1").find("option:selected").text();
    var address = $('#address').val();
    var cname ='';
    if(selCountries_1 !='中国'){
    cname = selCountries_1;
    }
    if(selProvinces_1 !='省份'){
    cname = selProvinces_1;
    }
    if(selCities_1 !='地级市'){
    cname += selCities_1;
    }
    if(selDistricts_1 !='市、县级市'){
    cname += selDistricts_1;
    }
    if(address !=''){
    cname += address;
    }
    var cityname = $('#address').val();
    if(cname !=''){
    cityname = cname;
    }
    console.log(cityname);
    geocoder(cityname);
}
//确定位置
function set_position(a,b){
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
            var map = new AMap.Map('allmap', {
                zoom: 16,
                scrollWheel: true,
                center: [a, b]
            })
            var positionPicker = new PositionPicker({
                mode: 'dragMarker',
                map: map
            });
            //var lat = $("#lat").val();
        //var lng = $("#lng").val();
            positionPicker.on('success', function(positionResult) {
                var position_idstr = positionResult.position;
                $("#lat").val(position_idstr['lat']);
                $("#lng").val(position_idstr['lng']);
            });
            positionPicker.on('fail', function(positionResult) {
                //document.getElementById('lng').innerHTML = ' ';
            });
            positionPicker.start();
    });
}
//地址转换经纬度
function geocoder(address) {
    AMap.service('AMap.Geocoder',function() {//回调函数
        var geocoder = new AMap.Geocoder({
            //radius: 1000 //范围,默认:500
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation(address, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //console.log(address);
                var map_zb = result.geocodes[0].location;
                set_position(map_zb['lng'], map_zb['lat']);
            }else{
                //set_position("{$supplier.lng}", "{$supplier.lat}");
            }
        });
    });

}



猜你喜欢

转载自blog.csdn.net/weixin_38615720/article/details/80349016
今日推荐