java调用高德地图API开发，高德在线地图开发——未完待续

最新推荐文章于 2024-08-23 20:08:17 发布

高数老师

最新推荐文章于 2024-08-23 20:08:17 发布

阅读量6.5k

点赞数 1

分类专栏：前端——各种秀文章标签：高德在线地图高德地图开发

本文链接：https://blog.csdn.net/qq_29073921/article/details/82688812

版权

前端——各种秀专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这是目录

一、引入高德地图API

高德地图官方示例：https://lbs.amap.com/api/javascript-api/example/map/map-show

前台调用高德地图开发之前要先引入，高德地图API，

“您申请的key值”需要到高德地图申请；https://lbs.amap.com/dev/key/app

二、高德地图开发

1、定义一个div来存放地图

<body>

    <div id="gaode_map"></div>

</body>

2、生成地图

<script type="text/javascript">

 var map = new AMap.Map('gaode_map', {

        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });

</script>

3、添加一个跳跃的点

   var marker = new AMap.Marker({//定义一个点
        position: map.getCenter(),
        draggable: true,
        cursor: 'move'
    });
    marker.setMap(map);
    // 设置点标记的动画效果，此处为弹跳效果
    marker.setAnimation('AMAP_ANIMATION_BOUNCE');

4、添加控件

    var scale = new AMap.Scale({//定义比例尺
        visible: true
    }),
    toolBar = new AMap.ToolBar({//定义工具条
        visible: true
    }),
    overView = new AMap.OverView({//定义方向盘
        visible: true
    }),
    map.addControl(scale);//添加比例尺
    map.addControl(toolBar);//添加工具条
    map.addControl(overView);//添加方向盘