2026-01-07

高德地图的基本使用

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

引入使用(main.js或者需要或者是那个的组件)

 import AMapLoader from '@amap/amap-jsapi-loader'

AMapLoader.load({

  key: '你的key',

  version: '2.0', // 指定要加载的 JSAPI 的版本,缺少时默认为 1.4.15

 plugins: ['AMap.Scale', 'AMap.GeoJSON','AMap.DistrictSearch'] // 需要使用的的插件列表,如比例尺'AMap.Scale'等,更多插件请看官方文档

 }).then((AMap) => {

   Vue.use(AMap)

 })

 this.map = new AMap.Map('地图容器div的id', {

            zoom:6,地图的缩放级别

           zooms: [8,20],//设置地图的缩放级别区间

            center: [107.945016, 34.197029],//中心点

            mapStyle: 'amap://styles/macaron' //设置地图的显示样式

           features: ['road','point']//设置地图的底图元素,缺少则显示全部元素,bg区域面、point兴趣点、road道路及道路标注、building建筑物

          })

更多功能官网查看官网,示例非常多:https://lbs.amap.com/demo/javascript-api-v2/example/marker/custom-icon-content

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容