高德地图 Javascript API 入门（四）

AlanKeene 发布于2019-08-20 14:29 / 3055人阅读

摘要：高德地图入门四地图覆盖物覆盖物类名说明是否插件点标记否覆盖物点标记复杂点标记对象，对普通点标记的扩展否覆盖物折线否覆盖物多边形否覆盖物圆否图片覆盖物否地图右键菜单否点标记预览自定义点标记预览多边形预览右键菜单添加右键菜单内容项放大缩小添加

高德地图 Javascript API 入门（四） 地图覆盖物 覆盖物

类名	说明	是否插件
AMap.Marker	点标记	否
AMap.Icon	覆盖物>点标记>复杂点标记对象，对普通点标记Marker 的扩展	否
AMap.Polyline	覆盖物>折线	否
AMap.Polygon	覆盖物>多边形	否
AMap.Circle	覆盖物>圆	否
AMap.GroundImage	图片覆盖物	否
AMap.ContextMenu	地图右键菜单	否

#### 点标记 JS

    var marker=new AMap.Marker({
        map:map,
        position:new AMap.LngLat(112.736465,37.696495)
    });

预览

自定义点标记

    var marker=new AMap.Marker({
        map:map,
        position:new AMap.LngLat(112.736465,37.696495),
        icon:new AMap.Icon({
            image:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2803620233,1906638381&fm=23&gp=0.jpg",
            size:[72,72],
            imageSize:[36,36]
        }),
        draggable:true,
        raiseOnDrag:true,
        shape:new AMap.MarkerShape({
            type:"circle",
            coords:[112.736465,37.696495,100]
        }),
        label:{
            content:"label",
            offset:new AMap.Pixel(0,-36)
        }
    });

预览

多边形

    var lineArr=[
        [112.49157,37.897392],
        [112.602806,37.898747],
        [112.608643,37.797355],
        [112.49775,37.79627]
    ];
    var polygon=new AMap.Polygon({
        map:map,
        path:lineArr
    });

预览

右键菜单

    var contextmenu=new AMap.ContextMenu();
    var pos=[];
    // 添加右键菜单内容项
    contextmenu.addItem("放大",function () {
        map.zoomIn();
    },0);
    contextmenu.addItem("缩小",function () {
        map.zoomOut();
    },1);
    contextmenu.addItem("添加点标记",function () {
        var marker=new AMap.Marker({
            map:map,
            position:pos
        });
    },2);
    // 监听鼠标右击事件
    map.on("rightclick",function (e) {
        contextmenu.open(map,e.lnglat);
        pos=e.lnglat;
    });

预览

信息窗体 信息窗体

    var infowindow=new AMap.InfoWindow({
        isCustom:false,
        content:"Hello,Yuanping",
        offset:new AMap.Pixel(0,-36),
        showShadow:true,
        closeWhenClickMap:true,
        autoMove:true
    });
    infowindow.open(map,new AMap.LngLat(112.736465,38.696495));

预览

小练习 鼠标划过山西大剧院时，弹出信息窗体

    // 坐标
    var lineArr=[
        [112.532802,37.808395],
        [112.533049,37.808395],
        [112.533124,37.808476],
        [112.533521,37.808459],
        [112.533558,37.808391],
        [112.533832,37.808391],
        [112.533848,37.80792],
        [112.534159,37.807959],
        [112.534159,37.80748],
        [112.533826,37.807514],
        [112.533832,37.807179],
        [112.533966,37.806848],
        [112.533376,37.806683],
        [112.533054,37.806687],
        [112.532684,37.806878],
        [112.53278,37.807191],
        [112.532796,37.80745],
        [112.532013,37.807285],
        [112.532019,37.808213],
        [112.532796,37.808018],
        [112.532818,37.808412]
    ];
    // 实例化Polygon类
    var polygon=new AMap.Polygon({
        map:map,
        path:lineArr
    });
    // 适应窗口
    map.setFitView();
    // 实例化信息窗体类
    var infowindow=new AMap.InfoWindow({
        content:"太原市
山西大剧院",
        closeWhenClickMap:true
    });
    // 监听鼠标移入、移除事件
    polygon.on("mouseover",function (e) {
        infowindow.open(map,map.getCenter());
    }).on("mouseout",function () {
        infowindow.close();
    });

预览

参考来源：http://lbs.amap.com/
作者：Yangfan

GPU云服务器云服务器高德地图api接口高德地图api接口文档高德地图高德地图大数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81678.html

高德地图 Javascript API 入门（一）

摘要：高德地图入门一准备工作首先注册个开发者账号然后创建应用，获取新建文件，在标签中引入如下代码把你的值填入即可您申请的值创建设置地图容器地图初始化创建地图设置地图参数可以通过以下设置也可通过对象的方法设置预览个性化地图改变地图样式目前支持五种地高德地图 Javascript API 入门（一）准备工作首先注册个开发者账号 showImg(https://segmentfault.co...

jone5679 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（二）

摘要：鼠标在地图上拉框即可绘制相应的矩形。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。参数设为时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象设为时，保留所绘制的覆盖物对象。高德地图 Javascript API 入门（二）鼠标工具插件测量距离 JS map.plugin([AMap.MouseTool],function ()...

dockerclub 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（七）

摘要：高德地图入门七热力图插件简单例子显示地图坐标点加载热力图插件预览参数构造函数说明构造一个热力图插件对象，为要叠加热力图的地图对象，属性参考列表中的说明。高德地图 Javascript API 入门（七）热力图插件简单例子 // 显示地图 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....

YuboonaZhang 2019-08-21 11:31 评论0 收藏0
高德地图 Javascript API 入门（六）

摘要：高德地图入门六出行规划公交路径公交换乘服务，提供起终点公交路线规划服务，整合步行方式初始化加载公交线路插件实例化北京必须值，搭乘公交所在城市可选值，搜索结果的标注线路等均会自动添加到此地图上可选值，显示搜索列表的容器可选值，详细信息驾驶策略高德地图 Javascript API 入门（六）出行规划公交路径公交换乘服务，提供起、终点公交路线规划服务，整合步行方式初始化 // 加...

idisfkj 2019-08-20 14:39 评论0 收藏0
高德地图 Javascript API 入门（三）

摘要：高德地图入门三距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。高德地图 Javascript API 入门（三）距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。加载插件 JS map.plugin([AMap.RangingTool],function () { ...

EdwardUp 2019-08-20 14:29 评论0 收藏0