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

集成效果如下，传入地址渲染出对应位置点附近地图

1、创建应用

2、引入静态安全密钥

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

更多方法

3、引入JSAPI

方法一直接引入JSAPI ：

方法二JS API Loader：

方法三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);
                }
            });
        });
    }