高德地图JSAPI Loader使用攻略

本文介绍了如何使用高德地图JSAPI Loader,包括通过npm安装Loader、注册账号申请Key、基础地图组件及点标记组件的使用,并解决远程数据地图渲染问题。详细步骤和示例代码帮助开发者更好地集成高德地图API。
摘要由CSDN通过智能技术生成

高德地图api文档:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

安装

安装推荐使用 JSAPI Loader 进行加载,使用npm安装,引入包的大小非常小。

按 NPM 方式使用 Loader

安装:

npm i @amap/amap-jsapi-loader --save
// 官方文档中加了-dev字段,加了-dev字段就只能在本地的时候使用,部署到服务器后将不引入包

使用:

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

AMapLoader.load({
   
    "key": "您申请的key值",   // 申请好的Web端开发者Key,首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
    "plugins": []  //插件列表
}).then((AMap)=>{
   
    map = new AMap.Map('container');
}).catch(e => {
   
    console.</
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
可以使用`@amap/amap-jsapi-loader`库来加载高德地图JSAPI,并在Vue组件中使用。以下是一个示例代码: 首先,安装依赖: ```bash npm install @amap/amap-jsapi-loader ``` 然后,在Vue组件中使用: ```vue <template> <div ref="map" style="height: 400px;"></div> </template> <script> import AMapLoader from '@amap/amap-jsapi-loader'; export default { name: 'AmapDemo', data() { return { map: null, marker: null, }; }, mounted() { AMapLoader.load({ key: 'your_amap_key', version: '2.0', plugins: ['AMap.Geocoder'], }).then((AMap) => { const map = new AMap.Map(this.$refs.map, { zoom: 13, center: [116.39, 39.9], }); map.on('click', (e) => { const geocoder = new AMap.Geocoder({ city: '全国', }); geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()]).then((result) => { const address = result.regeocode.formattedAddress; const position = [e.lnglat.getLng(), e.lnglat.getLat()]; if (this.marker) { this.marker.setPosition(position); } else { this.marker = new AMap.Marker({ position, map, }); } console.log('Address:', address); console.log('Position:', position); }); }); this.map = map; }); }, }; </script> ``` 在上面的代码中,我们首先使用`AMapLoader.load`方法加载高德地图JSAPI,并在`then`方法中初始化地图。 然后,我们在地图上添加一个`click`事件,当用户点击地图时,我们使用`AMap.Geocoder`插件获取该位置的地址和经纬度,并将其打印到控制台中。如果已经存在标记,则更新标记的位置,否则创建一个新的标记。 注意,在上面的示例代码中,我们需要将`your_amap_key`替换为你自己的高德地图开发者Key。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值