高德地图开发

最新推荐文章于 2025-07-09 13:39:11 发布

转载最新推荐文章于 2025-07-09 13:39:11 发布 · 555 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wfblog/p/10063478.html

文章标签：

#ui #javascript #ViewUI

1、高德地图开发文档：https://lbs.amap.com/api/javascript-api/summary

　在线编辑预览：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

（个人）可以把地图的创建使用过程，想象成 vue 的创建使用过程。都有生命周期，创建完成之后再将真实的 DOM 节点插入到对应的挂载元素上。

key值：

<script src="https://webapi.amap.com/maps?v=1.4.9&key=e396ba49399513e60262b3a8653d5d4f"></script>

2、高德地图最简单教程： https://blog.youkuaiyun.com/qq_39588818/article/details/79421025 或 https://www.cnblogs.com/milkmap/p/3687855.html （比较详细）或 https://blog.youkuaiyun.com/wuyou1336/article/details/52387502

3、手机定位的原理： http://www.sohu.com/a/76257016_335896

1、创建地图（创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性）

2、图层（默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过 `map.add`方法添加图层）

　　JS API 提供了标准、卫星、路网、路况、建筑等多个官方图层，同时也提供了加载第三方WMS、WMTS、XYZ等标准图层的接口，也提供了把一般的图片、Canvas、视频、热力等作为图层的能力

叠加路况图层后

    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加图层到地图

3、点标记与矢量图形（都支持事件）

　　JS API 提供了在地图之上绘制覆盖物的能力，比如点标记 Marker、文本标记 Text、圆点标记 CircleMarker。（也提供了绘制圆Circle、折线 Polyline、多边形 Polygon、椭圆 Ellipse、矩形 Rectangle、贝瑟尔曲线 BesizerCurve等矢量图形的能力）

    var marker = new AMap.Marker({
        position:[116.39, 39.9]//地理坐标位置
    })
    map.add(marker);//添加到地图

　　移除的方法如下：

    map.remove(marker)

4、信息窗体（信息窗体一般都是和事件结合起来使用的）

   //构建信息窗体中显示的内容
   var info = [];
    info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
    info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
    info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");

    var infoWindow = new AMap.InfoWindow({
        content: info.join("")  //使用默认信息窗体框样式，显示信息内容
    });

    infoWindow.open(map, map.getCenter());

信息窗体，默认在界面中心点出现，但是可以随地图移动。

5、UI组件库（上面的结构，UI组件库中也有，组件库中有多种样式选择）

　　a、SimpleMarker（简单标注）库。继承自AMap.Marker（所以上面的信息窗体的属性方法，这里的可以使用）。在已有功能的基础上，额外增加一些功能。就是上面的点标记的功能，但是样式更多的定制性。

　　b、SimpleInfoWindow（简单信息窗体）库。继承自 AMap.InfoWindow，所以上面的信息窗体的属性方法，这里的可以使用，即 SimpleInfoWindow 是 AMap.InfoWindow对象的扩展。

　　c、PositionPicker（拖拽选址）库。用于在地图上选取位置，并获取所选位置的地址信息，以及周边POI、周边道路、周边路口等信息。（这个图标和点标记不同的地方是，PositionPicker这个图标是获取当前定位点的信息的）

其他归纳

2、地图生命周期

a、创建地图：

    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });