高德地图-绘制路线

最新推荐文章于 2024-08-06 10:19:26 发布

风格灬月

最新推荐文章于 2024-08-06 10:19:26 发布

阅读量1.6w

点赞数 5

文章标签：高德地图绘制路线

本文链接：https://blog.csdn.net/qq_36166448/article/details/89470952

版权

本文详细介绍了如何使用高德地图JS API进行地图应用开发，包括地图初始化、添加景点标记、绘制与编辑矢量路线，以及实现路线动画飞行。每个步骤都提供了具体的实践操作和参考资料。

摘要由CSDN通过智能技术生成

高德地图-绘制路线

效果如下图：

绘制景点之前的路线

步骤一：使用高德地图 JS API 开发地图应用之前的一些准备工作

1.1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；

HTML
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>

1.2. 添加div标签作为地图容器，同时为该div指定id属性；

HTML
<div id="container"></div>

1.3.为地图容器指定高度、宽度；

CSS
#container {
   width:300px; height: 180px; }

1.4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；

HTML
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

步骤二：创建地图及添加景点标记

2.1创建地图

JavaScript
var map = new AMap.Map('container',{
   
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],//设置地图中心点坐标
    layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
    lang:'zh_cn',  //设置地图语言类型
});

构造函数	说明	是否插件
AMap.Map(container:String/HTMLDivElement, opts:MapOptions)	构造一个地图对象，参数container中传入地图容器DIV的ID值或者DIV对象，opts地图初始化参数对象	否

MapOptions	类型	说明
view	View2D	地图视口，用于控制影响地图静态显示的属性，如：地图中心点“center”推荐直接使用zoom、center属性为地图指定级别和中心点
layers	Array	地图图层数组，数组可以是图层中的一个或多个，默认为普通二维地图。当叠加多个图层时，普通二维地图需通过实例化一个TileLayer类实现
zoom	Number	地图显示的缩放级别
center	LngLat	地图中心点坐标值
labelzIndex	Number	地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
zooms	Array	地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
lang	String	地图语言类型可选值：zh_cn：中文简体，en：英文，zh_en：中英文对照默认为: zh_cn：中文简体注：由于图面内容限制，中文、英文、中英文地图POI可能存在不一致的情况

2.2.自定义景点标记

（链接参考：https://lbs.amap.com/api/javascript-api/example/marker/adaptive-show-multiple-markers）

JavaScript
 map.clearMap();  // 清除地图覆盖物
    //景点数据（后台数据）
    var markers = [{
   
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
        position: [116.205467, 39.907761]
    }, {
   
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
        position: [116.368904, 39.913423]
    }, {
   
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
        position: [116.305467, 39.807761]
    }];

    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
   
        new AMap.Marker({
   
            map: map,
            icon: marker.ico