vue2使用高德地图
1. 高德地图申请key
2. vue代码中使用：
1. 安装
npm install @amap/amap-jsapi-loader 讯享网
2. 页面中使用
讯享网<template> <div id="map" style="width: 900px; height: 800px;"></div> </template> <script> import AMapLoader from '@amap/amap-jsapi-loader'; export default { name: 'MapComponent', mounted() { window._AMapSecurityConfig = { securityJsCode: '' }; // 安全密钥，不写这行，mapStyle不生效 AMapLoader.load({ key: '', version: '2.0', plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] }).then((AMap) => { const map = new AMap.Map('map', { zoom: 11, center: [116., 39.90923], // 设置中心点坐标 mapStyle: 'amap://styles/自定义样式id',//自定义样式id }); // 进行进一步的地图操作... }).catch(e => { console.log(e); }); } }; </script>
3. 高德自定义样式
1. 网址：https://geohub.amap.com/mapstyle/index
2. 使用方式：
3.将生成的id填入mapStyle
！！！！！！！！！自定义mapStyle不生效的原因：
window._AMapSecurityConfig = { securityJsCode: ‘’ }; // 安全密钥，不写这行，mapStyle不生效
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/32442.html