美文网首页
高德地图 JS API 学习摘要4

高德地图 JS API 学习摘要4

作者: Upcccz | 来源:发表于2019-02-18 19:04 被阅读0次

    地图控件

    • 添加与移除
     <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"</script>
    
    var scale = new AMap.Scale({ // 比例尺
        visible: false
    }) 
    var toolBar = new AMap.ToolBar({ // 工具条
        visible: false
    })
    var overView = new AMap.OverView({ // 鹰眼
        visible: false // 设置隐藏
    })
    map = new AMap.Map("container", {
        resizeEnable: true
    });
    
    map.addControl(scale); // 添加控件
    map.addControl(toolBar);
    map.addControl(overView);
    
    scale.show();  // 展示比例尺
    scale.hide();  // 隐藏比例尺
    toolBar.show(); // 展示工具条
    toolBar.hide(); // 隐藏工具条
    toolBar.showDirection(); // 工具条展示方向盘
    toolBar.hideDirection(); // 工具条隐藏方向盘
    toolBar.showRuler(); // 工具条展示标尺
    toolBar.hideRuler(); // 工具条隐藏标尺
    overView.show(); // 显示鹰眼
    overView.hide(); // 隐藏鹰眼
    overView.open(); // 鹰眼展开
    overView.close(); // 鹰眼收起
    
    • 简易缩放按钮
    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key"></script>
    
    AMap.plugin(['AMap.ToolBar'], function(){
        // 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar({
            // 简易缩放模式,默认为 false
            liteStyle: true
        }));
    });
    
    • 3D控制罗盘
    // 创建地图实例
    var map = new AMap.Map("container", {
        zoom: 13,
        center: [116.43, 39.92],
        resizeEnable: true,
        viewMode: '3D',
        pinch: 45
    });
    
    AMap.plugin([
        'AMap.ControlBar',
    ], function(){
        // 添加 3D 罗盘控制
        map.addControl(new AMap.ControlBar());
    });
    

    信息窗体

    • 默认样式信息窗体
    var infoWindow;
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.473188,39.993253],
        zoom: 13
    });
    
    //在指定位置打开信息窗体
    function openInfo() {
        var info = 
            `<div class='input-card content-window-card'>
                <div>
                    <img style="float:left;" src=" https://webapi.amap.com/images/autonavi.png "/>
                </div> 
                <div style="padding:7px 0px 0px 0px;">
                    <h4>高德软件</h4>
                    <p class='input-item'>电话 : 010-84107000 邮编 : 100102</p>
                    <p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p>
                </div>
            </div>`
    
        infoWindow = new AMap.InfoWindow({
            content: info //使用默认信息窗体框样式,显示信息内容
        });
    
        infoWindow.open(map, map.getCenter()); // 在地图中心打开信息窗口
    }
    
    infoWindow.close() // 关闭信息窗口
    
    • 自定义样式信息窗体
    //实例化信息窗体
    var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
        content = [];
    content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址:北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
    content.push("电话:010-64733333");
    content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });
    
    //构建自定义信息窗体
    function createInfoWindow(title, content) {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
    
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;
    
        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);
    
        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);
    
        // 定义底部内容 (尖角)
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        return info;
    }
    
    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    
    • 信息窗体内的事件交互

    在html中绑定事件处理程序

    // infowidnow 的 innerHTML
    var infoWindowContent =
        '<div className="custom-infowindow input-card">' +
            '<label style="color:grey">故宫博物院</label>' +
            '<div class="input-item">' +
                '<div class="input-item-prepend">' +
                    '<span class="input-item-text" >经纬度</span>' +
                '</div>' +
                '<input id="lnglat" type="text" />' +
            '</div>' +
            // 为 infowindow 添加自定义事件
            '<input id="lnglat2container" type="button" class="btn" value="获取该位置经纬度" onclick="getLngLat()"/>' +
        '</div>';
    
    // 创建一个自定义内容的 infowindow 实例
    var infoWindow = new AMap.InfoWindow({
        position: lnglat,
        offset: new AMap.Pixel(0, -35),
        content: infoWindowContent
    });
    
    infoWindow.open(map);
    
    // 将当前经纬度展示在 infowindow 的 input 中
    function getLngLat(){
        var lnglatInput = document.getElementById('lnglat');
        lnglatInput.setAttribute('value', lnglat.toString());
    }
    
    • 带检索功能的信息窗体

    使用AdvancedInfoWindow,可创建带检索功能的信息窗体,并可设置搜索功能。

    var content = '<div class="info-title">高德地图</div><div class="info-content">' +
            '<img src="https://webapi.amap.com/images/amap.jpg">' +
            '高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br/>' +
            '<a target="_blank" href = "https://mobile.amap.com/">点击下载高德地图</a></div>';
    var infowindow1 = new AMap.AdvancedInfoWindow({
        content: content,
        offset: new AMap.Pixel(0, -30) // 默认拥有 起点 终点 搜索三个功能
    });
    var infowindow2 = new AMap.AdvancedInfoWindow({
        content: content,
        asOrigin: false, // 这里出发功能
        asDestination: false, // 到这去功能
        offset: new AMap.Pixel(0, -30)
    });
    var infowindow3 = new AMap.AdvancedInfoWindow({
        content: content,
        placeSearch: false, // 搜索功能
        asDestination: false,
        offset: new AMap.Pixel(0, -30)
    });
    
    infowindow1.open(map,lnglat) // 打开infowindow1 
    infowindow2.open(map,lnglat) // 在地图上打开infowindow2 ,会代替infowindow1 ,不会同时出现 
    
    • 给多个点添加信息窗体
    var map = new AMap.Map("container", {resizeEnable: true});
    var lnglats = [
        [116.368904, 39.923423],
        [116.382122, 39.921176],
        [116.387271, 39.922501],
        [116.398258, 39.914600]
    ];
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
            position: lnglats[i],
            map: map
        });
        marker.content = '我是第' + (i + 1) + '个Marker';
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});
    }
    function markerClick(e) {
        infoWindow.setContent(e.target.content); //为信息窗体设定对应内容 
        infoWindow.open(map, e.target.getPosition());
        // 地图无论何时都只展示一个信息窗体
    }
    map.setFitView();
    
    • 默认右键菜单
    
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.MouseTool"></script>
    
    //创建右键菜单
    var contextMenu = new AMap.ContextMenu();
    
    //右键放大
    contextMenu.addItem("放大一级", function () {
        map.zoomIn();
    }, 0);
    
    //右键缩小
    contextMenu.addItem("缩小一级", function () {
        map.zoomOut();
    }, 1);
    
    //右键显示全国范围
    contextMenu.addItem("缩放至全国范围", function (e) {
        map.setZoomAndCenter(4, [108.946609, 34.262324]);
    }, 2);
    
    //右键添加Marker标记
    contextMenu.addItem("添加标记", function (e) {
        var marker = new AMap.Marker({
            map: map,
            position: contextMenuPositon //基点位置
        });
    }, 3);
    
    //地图绑定鼠标右击事件——弹出右键菜单
    map.on('rightclick', function (e) {
        contextMenu.open(map, e.lnglat);
        contextMenuPositon = e.lnglat;
    });
    
    • 自定义右键菜单
    
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.MouseTool"></script>
    
    //创建右键菜单 ContextMenu --> 自定义类
    var menu = new ContextMenu(map);
    
    //自定义菜单类
    function ContextMenu(map) {
        var me = this;
        //地图中添加鼠标工具MouseTool插件
        this.mouseTool = new AMap.MouseTool(map);
        this.contextMenuPositon = null; // 基点位置
        var content = [];
        content.push("<div class='info context_menu'>");
        content.push("  <p onclick='menu.zoomMenu(0)'>缩小</p>");
        content.push("  <p class='split_line' onclick='menu.zoomMenu(1)'>放大</p>");
        content.push("  <p class='split_line' onclick='menu.distanceMeasureMenu()'>距离量测</p>");
        content.push("  <p onclick='menu.addMarkerMenu()'>添加标记</p>");
        content.push("</div>");
        
        //通过content自定义右键菜单内容
        this.contextMenu = new AMap.ContextMenu({isCustom: true, content: content.join('')});
    
        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e) {
            me.contextMenu.open(map, e.lnglat);
            me.contextMenuPositon = e.lnglat; //右键菜单位置
        });
    }
    
    ContextMenu.prototype.zoomMenu = function zoomMenu(tag) {//右键菜单缩放地图
        if (tag === 0) {
            map.zoomOut();
        }
        if (tag === 1) {
            map.zoomIn();
        }
        this.contextMenu.close();
    };
    
    ContextMenu.prototype.distanceMeasureMenu = function () {  //右键菜单距离量测
        this.mouseTool.rule();
        this.contextMenu.close();
    };
    
    ContextMenu.prototype.addMarkerMenu = function () {  //右键菜单添加Marker标记
        this.mouseTool.close();
        var marker = new AMap.Marker({
            map: map,
            position: this.contextMenuPositon //基点位置
        });
        this.contextMenu.close();
    };
    
    • 覆盖物添加右键菜单

    同一个菜单 注册事件的元素不同而已

    // 给覆盖物绑定鼠标右击事件——弹出右键菜单
    marker.on('rightclick', function (e) {
        contextMenu.open(map, e.lnglat);
    });
    

    矢量图形

    • 折线的绘制和编辑

    使用AMap.PolylineAMap.PolyEditor插件绘制和编辑折线

    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.PolyEditor"></script>
    
    var path = [
        [116.362209, 39.887487],
        [116.422897, 39.878002],
        [116.372105, 39.90651],
        [116.428945, 39.89663]
    ];
    
    var polyline = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 3,
        strokeColor: "#3366FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    
    polyline.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ polyline ])
    
    var polyEditor = new AMap.PolyEditor(map, polyline)
    
    // 点击虚点或拖动虚点 虚点变亮 在相邻两个点之间新增两个虚节点 激发addnode事件
    // 点击亮点 亮点及相邻的两个虚点被移除 重新连线 永远是一虚一亮 激发removenode事件
    // 拖动亮点 只改变联系 激发addjust事件
    // polyEditor.open() 开启编辑
    // polyEditor.close() 结束编辑
    
    
    polyEditor.on('addnode', function(event) {
        log.info('触发事件:addnode') 
    })
    
    polyEditor.on('adjust', function(event) {
        log.info('触发事件:adjust')
    })
    
    polyEditor.on('removenode', function(event) {
        log.info('触发事件:removenode')
    })
    
    polyEditor.on('end', function(event) {
        log.info('触发事件: end')
        // event.target 即为编辑后的折线对象
    })
    
    • 弧线的绘制和编辑

    使用AMap.BezierCurveAMap.BezierEditor插件绘制和编辑弧线

    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.BezierCurveEditor"></script>
    
    var path = [//每个弧线段有两种描述方式
        [116.37, 39.91],//起点
        //第一段弧线
        //弧线段有两种描述方式1
        [116.380298, 39.907771, 116.38, 39.90],//控制点,途经点
        //第二段弧线
        [116.385298, 39.907771, 116.40, 39.90],//控制点,途经点
        //第三段弧线
        //弧线段有两种描述方式2
        [
            [116.392872, 39.887391],//控制点
            [116.40772, 39.909252],//控制点
            [116.41, 39.89]//途经点
        ],
        //第四段弧线
        [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]
        //控制点,控制点,途经点,每段最多两个控制点
    ];
    
    var bezierCurve = new AMap.BezierCurve({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 3,
        strokeColor: "#3366FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 10],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })
    
    bezierCurve.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ bezierCurve ])
    
    var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve)
    // bezierCurveEditor.open() 开始编辑
    // bezierCurveEditor.close() 结束编辑
    
    bezierCurveEditor.on('adjust', function(event) {
        log.info('触发事件:adjust')
    })
    
    bezierCurveEditor.on('removenode', function(event) {
        log.info('触发事件:removenode')
    })
    
    • 多边形的绘制和编辑
     <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.PolyEditor"></script>
    
     var path = [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
    ]
    
    var polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF", 
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
    })
    
    map.add(polygon)
    // 缩放地图到合适的视野级别
    map.setFitView([ polygon ])
    
    var polyEditor = new AMap.PolyEditor(map, polygon)
    // polyEditor.open() 开启编辑
    // polyEditor.close() 结束编辑
    
    polyEditor.on('addnode', function(event) {
        log.info('触发事件:addnode')
    })
    
    polyEditor.on('adjust', function(event) {
        log.info('触发事件:adjust')
    })
    
    polyEditor.on('removenode', function(event) {
        log.info('触发事件:removenode')
    })
    
    polyEditor.on('end', function(event) {
        log.info('触发事件: end')
        // event.target 即为编辑后的多边形对象
    })
    
    • 矩形的绘制和编辑
    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.RectangleEditor"></script>
    
    // 定义西南(左下) 东北(右下)两个对角点
    var southWest = new AMap.LngLat(116.356449, 39.859008)
    var northEast = new AMap.LngLat(116.417901, 39.893797)
    var bounds = new AMap.Bounds(southWest, northEast)
    // 绘制
    var rectangle = new AMap.Rectangle({
        bounds: bounds,
        strokeColor:'red',
        strokeWeight: 6,
        strokeOpacity:0.5,
        strokeDasharray: [30,10],
        // strokeStyle还支持 solid
        strokeStyle: 'dashed',
        fillColor:'blue',
        fillOpacity:0.5,
        cursor:'pointer',
        zIndex:50,
    })
    
    rectangle.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ rectangle ])
    
    var rectangleEditor = new AMap.RectangleEditor(map, rectangle)
    // rectangleEditor.open() 开始编辑
    // rectangleEditor.close() 结束编辑
    
    rectangleEditor.on('adjust', function(event) {
        log.info('触发事件:adjust')
    })
    
    rectangleEditor.on('end', function(event) {
        log.info('触发事件: end')
        // event.target 即为编辑后的矩形对象
    })
    
    • 圆的绘制和编辑
    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.CircleEditor"></script>
    
    var circle = new AMap.Circle({
        center: [116.433322, 39.900255],
        radius: 1000, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10], 
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50,
    })
    
    circle.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ circle ])
    
    var circleEditor = new AMap.CircleEditor(map, circle)
    // circleEditor.open() 开启编辑
    // circleEditor.close() 结束编辑
    
    circleEditor.on('move', function(event) {
        log.info('触发事件:move') // 圆心移动时触发    
    })
    
    circleEditor.on('adjust', function(event) {
        log.info('触发事件:adjust') // 半径拉大时触发
    })
    
    circleEditor.on('end', function(event) {
        log.info('触发事件: end')
        // event.target 即为编辑后的圆形对象
    })
    
    • 椭圆的绘制和编辑
     <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.EllipseEditor"></script>
    
     var ellipse = new AMap.Ellipse({
        center: [116.433322, 39.900255],
        radius: [ 2000, 1000 ], //半径
        borderWeight: 3,
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10], 
        fillColor: '#1791fc',
        zIndex: 50,
    })
    
    ellipse.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ ellipse ])
    
    var ellipseEditor = new AMap.EllipseEditor(map, ellipse)
    // ellipseEditor.open();  开启编辑
    // ellipseEditor.close(); 结束编辑
    
    ellipseEditor.on('move', function(event) {
        log.info('触发事件:move') // 圆心移动触发
    })
    
    ellipseEditor.on('adjust', function(event) {
        log.info('触发事件:adjust') // 横轴 纵轴移动触发
    })
    
    ellipseEditor.on('end', function(event) {
        log.info('触发事件: end')
        // event.target 即为编辑后的椭圆对象
    })
    
    • 利用mouseTool绘制覆盖物
    <script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.MouseTool"></script>
    
     var mouseTool = new AMap.MouseTool(map)
    
    function drawPolyline () { // 绘制线段
        mouseTool.polyline({ 
            strokeColor: "#3366FF",  // 描边线颜色
            strokeOpacity: 1, // 描边线透明度
            strokeWeight: 6, // 描边线宽度
            // 线样式还支持 'dashed' 
            strokeStyle: "solid", // 描边线样式
            // strokeStyle是dashed时有效
            // strokeDasharray: [10, 5],
        })
    }
    
    function drawPolygon () { // 绘制多边形
        mouseTool.polygon({
            strokeColor: "#FF33FF", 
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillColor: '#1791fc', // 填充颜色
            fillOpacity: 0.4, // 填充颜色透明度
            strokeStyle: "solid",
        })
    }
    
     function drawRectangle () { // 绘制矩形
        mouseTool.rectangle({
            strokeColor:'red',
            strokeOpacity:0.5,
            strokeWeight: 6,
            fillColor:'blue',
            fillOpacity:0.5,
            strokeStyle: 'solid',
        })
    }
    
    function drawCircle () { // 绘制圆形
        mouseTool.circle({
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillColor: '#1791fc',
            fillOpacity: 0.4,
            strokeStyle: 'solid',
        })
    }
    
    mouseTool.on('draw', function(event) {
        // event.obj 为绘制出来的覆盖物对象
        log.info('覆盖物对象绘制完成')
    })
    
    • 使用overlayGroup获取覆盖物组
    var overlayGroup = new AMap.OverlayGroup([ polyline, polygon, circle ])
    overlayGroup.show() // 显示覆盖物组
    overlayGroup.hide() // 隐藏覆盖物组
    overlayGroup.setOptions({ 
        fillColor: randomColor(), 
        strokeColor: randomColor(), 
        outlineColor: randomColor() 
    }) // 批量修改覆盖物组样式
    

    相关文章

      网友评论

          本文标题:高德地图 JS API 学习摘要4

          本文链接:https://www.haomeiwen.com/subject/tmoseqtx.html