高德地图自定义样式不生效_高德最新配置密钥_vue使用高德地图问题
2024-11-24 10:01:11
高德地图更新了配置规则，web端引入需要额外配置安全密钥，并引发了一系列的问题，比如自定义样式不生效等
2515

vue使用步骤：

1.引入高德地图

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

2.引入并配制安全密钥

import AMapLoader from '@amap/amap-jsapi-loader';
<script type="text/javascript">
        window._AMapSecurityConfig = {
            serviceHost:'您的代理服务器域名或地址/_AMapService',  
            // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
        }
</script>


AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

3.如果需要安全考虑，可以用服务器nginx转发

server {
        listen       80;             #nginx端口设置，可按实际端口修改
        server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改
        
        # 自定义地图服务代理
        location /_AMapService/v4/map/styles {
            set $args "$args&jscode=您的安全密钥";
            proxy_pass https://webapi.amap.com/v4/map/styles;
        }
        # 海外地图服务代理
        location /_AMapService/v3/vectormap {
            set $args "$args&jscode=您的安全密钥";
            proxy_pass https://fmap01.amap.com/v3/vectormap;
        }
        # Web服务API 代理
        location /_AMapService/ {
            set $args "$args&jscode=您的安全密钥";
            proxy_pass https://restapi.amap.com/;
        }
}

4.使用自定义地图

//在第二步的时候 更改load的引入
var map = new AMap.Map('container',{
    mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
});

PS：自定义地图需要引入自己的，如果想用别人的样式，需要在https://geohub.amap.com/mapstyle/index 自定义平台登陆自己账号，并打开别人分享的链接，点击左下角引入自己样式就可以了

最新文章