h5网站端新版本高德快速集成

逆袭的菜鸟X

已于 2023-06-09 10:05:19 修改

阅读量411

点赞数

文章标签： js 前端

于 2023-06-09 10:03:22 首次发布

本文链接：https://blog.csdn.net/weixin_36445197/article/details/131121206

版权

本文介绍了如何集成高德地图API，包括创建应用、设置安全密钥、引入JSAPI的三种方法以及在React中加载地图并传入地址显示对应位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

集成效果如下，传入地址渲染出对应位置点附近地图
在这里插入图片描述

1、创建应用

在这里插入图片描述

2、引入静态安全密钥

引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'您申请的安全密钥',
    }
</script>

更多方法

3、引入JSAPI

方法一直接引入JSAPI ：

<div id='container' ></div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 
<script type="text/javascript" >
  // 地图初始化应该在地图容器div已经添加到DOM树之后
  var map = new AMap.Map('container', {
    zoom:12
  })
</script>

方法二JS API Loader：

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" >
  window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
AMapLoader.load({
  "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
  "version": "2.0",   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  "AMapUI": {             // 是否加载 AMapUI，缺省不加载
    "version": '1.1',   // AMapUI 版本
    "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
  },
  "Loca":{                // 是否加载 Loca， 缺省不加载
    "version": '2.0'  // Loca 版本
  },
}).then((AMap)=>{
  var map = new AMap.Map('container');
  map.addControl(new AMap.Scale());
}).catch((e)=>{
  console.error(e);  //加载错误提示
});   
</script>

方法三NPM 安装 Loader：

npm i @amap/amap-jsapi-loader --save

import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
AMapLoader.load({
  "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
  "version": "2.0",   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
  map = new AMap.Map('container');
}).catch(e => {
  console.log(e);
})

方法四异步加载：

//设置您的安全密钥
window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
// 声明异步加载回调函数
window.onLoad  = function(){ 
  var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

4、传入地址加载对应位置地图(React)

renderMapStyle(address: string) {
        new AMap.plugin("AMap.Geocoder", () => {
            let geocoder = new AMap.Geocoder();
            geocoder.getLocation(address, (status: any, result: any) => {
                if (status === "complete" && result.geocodes.length) {
                    let lnglat = result.geocodes[0].location,
                        map = new AMap.Map("spacemap", {
                            zoom: 15,
                            center: [lnglat.lng, lnglat.lat],
                        }),
                        marker = new AMap.Marker({
                            position: new AMap.LngLat(lnglat.lng, lnglat.lat),
                            title: address,
                        });

                    map.add(marker);
                }
            });
        });
    }