百度地图引入

百度地图

代码片复制

下面展示一些 内联代码片。

首先你要在你的页面中为AMapUI留出一个空间
然后就行了

<%--地图--%>
<script type="text/javascript">

    function map(longitude,latitude){
        AMapUI.loadUI(['misc/PositionPicker'],function(PositionPicker) {

            var map = new AMap.Map('container', {
                zoom:16,//缩放级别
                <%--<c:if test="${ empty longitude && empty latitude }">--%>
                <%--center: ['113.636991', '34.736983'],//设置地图中心点坐标--%>
                <%--</c:if>--%>
                center: [longitude, latitude],//设置地图中心点坐标

                showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
                resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
                keyboardEnable: false, //地图是否可通过键盘控制，默认为true
                doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
                zoomEnable: true, //地图是否可缩放，默认值为true
                rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false

            });
            //定位
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                    buttonOffset: new AMap.Pixel(10, 20),
                    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,
                    //  定位按钮的排放位置,  RB表示右下
                    buttonPosition: 'RB'
                });

                geolocation.getCurrentPosition()
                AMap.event.addListener(geolocation, 'complete', onComplete)
                AMap.event.addListener(geolocation, 'error', onError)

                function onComplete (data) {
                    console.log("定位成功："+data)
                }

                function onError (data) {
                    console.log("定位错误："+data)
                }
            });

            //缩放比例尺
            AMap.plugin('AMap.ToolBar',function(){//异步加载插件
                var toolbar = new AMap.ToolBar();
                map.addControl(toolbar);


            });

            //输入提示
            var autoOptions = {
                input: "tipinput"
            };

            var auto = new AMap.Autocomplete(autoOptions);


            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }

            //拖拽选址
            var positionPicker = new PositionPicker({
                mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                map:map//依赖地图对象
            });
            positionPicker.on('success', function(positionResult) {
                // document.getElementById('lnglat').innerHTML = positionResult.position;
                // document.getElementById('address').innerHTML = positionResult.address;
                // document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
                // document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
                // document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
                console.log( positionResult.position)

                $("#longitude").val(positionResult.position.lng);
                $("#latitude").val(positionResult.position.lat);
            });
            positionPicker.start();

        });
    }
</script>