高德地图 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.Polyline和AMap.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.BezierCurve和AMap.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

地图控件

信息窗体

矢量图形

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读