JS-高德地图开发笔记

最新推荐文章于 2026-04-21 09:43:53 发布

原创

最新推荐文章于 2026-04-21 09:43:53 发布 · 4.7k 阅读

标签

#高德地图 #地图

收录于

本文详细记录了使用JavaScript开发高德地图的过程，包括申请key、创建地图、个性化展示、地图控件的使用以及如何在地图上进行绘制。在创建地图部分，介绍了如何显示以特定点为中心的地图，加载地图API，并提供了设置地图样式的多种选择。同时，还涵盖了室内地图的使用。

一.申请key（略）

二.创建地图

1. 显示地图

1）显示以某点为中心的地图

    var map = new AMap.Map('container', {  
                        resizeEnable: true,
                     zoom:11,
                      center: [116.397428, 39.90923]       //地点的坐标
                    });

2）加载地图javascript api

a. 从页面直接引入：

            <script type="text/javascript" src="https://webproxy.poorya-velaei-d67.workers.dev/http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
            （使用htmls方式加载地图）
            <script type="text/javascript" src="https://webproxy.poorya-velaei-d67.workers.dev/https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

b 异步加载javascript api

 <script src="https://webproxy.poorya-velaei-d67.workers.dev/http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=init"></script>
    <script>
    function init(){
       var map = new AM