高德地圖 純js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=a47099cb39b7e139831d04e1619ef6b3"></script>
<script  type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<div class="layui-form-item">
    <label class="col-sm-4 control-label">地圖定位：</label>
    <div class="col-sm-4 control-label">
        <div id="pickerBox" style="font-size: 12px;">
            <input id="pickerInput" class="form-control form-bind" name="location" placeholder="輸入關鍵字選取地點" />
            <div id="poiInfo"></div>
        </div>
    </div>
    <div id="container" class="map col-sm-5" tabindex="0" style="height: 200px;width: 65%;margin-left: 15.5%;"></div>
    <input type="hidden" name="longitude" class="form-bind">
    <input type="hidden" name="latitude" class="form-bind">
</div>
<div class="layui-form-item">
    <label class="layui-form-label width100">詳細地址</label>
    <div class="layui-input-block">
        <input type="text" id="address" name="address" value="${shop.address!}"  class="layui-input">
    </div>
</div>

 

<script type="text/javascript">
$(document).ready(function () {
    let map = new AMap.Map('container', {
        resizeEnable: true, // 是否監控地圖容器尺寸變化
        zoom: 11, // 初始地圖級別
        //center: [116.397428, 39.90923] //初始化地圖中心點
    });
    let shopLocation;
    if( $("#lat").val()!=null && $("#lat").val()!=""){
        shopLocation = {N: $("#lat").val(), O: $("#lng").val(), lng: $("#lng").val(), lat: $("#lat").val()};
         console.log(1)
    }else{
        shopLocation = {N: 39.90923, O:116.397428 , lng: 116.397428, lat:39.90923 };
        console.log(2)
    }


    AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        let poiPicker = new PoiPicker({
            // city:'北京',
            input: 'pickerInput'
        });
        // 初始化poiPicker
        poiPickerReady(poiPicker);
    });
    function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        let marker = new AMap.Marker();
        let infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -20)
        });
        // 選取了某個POI
        poiPicker.on('poiPicked', function(poiResult) {
            var source = poiResult.source,
                poi = poiResult.item,
                info = {
                    source: source,
                    id: poi.id,
                    name: poi.name,
                    location: poi.location.toString(),
                    address: poi.address
                };

            $("#address").val(poi.address+info.name);
            $("#lat").val(poi.location.lat);
            $("#lng").val(poi.location.lng);

           /* $("input[name='location']").val(info.name);
            $("input[name='longitude']").val(poi.location.lng);
            $("input[name='latitude']").val(poi.location.lat);*/
            marker.setMap(map);
            infoWindow.setMap(map);
            marker.setPosition(poi.location);
            infoWindow.setPosition(poi.location);
            infoWindow.setContent('詳細信息: <pre>' + info.name+'<br>'+info.address + '</pre>');
            infoWindow.open(map, marker.getPosition());
            // map.setCenter(marker.getPosition());
        });

        poiPicker.onCityReady(function() {
            // poiPicker.suggest('');
            marker.setMap(map);
            infoWindow.setMap(map);
            infoWindow.setContent('詳細信息: <pre>'+""+'</pre>');
            infoWindow.open(map, shopLocation);
        });
    }
});
</script>