高德地图1---地图加载、标记地点、信息窗体

本文介绍了如何使用高德地图的JavaScript API进行地图加载、设置地图属性,以及添加标记和信息窗体的操作。通过示例代码展示了创建地图、设置中心点、缩放级别,以及添加点标记和自定义信息窗体的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目需要用到高德地图,故研究了一下高德的jsApi,近几天闲来无事,将其常用功能分类从高德地图API上搬过来,以便日后查阅。
要使用高德就需要有一个高德的key值,并引入其js脚本,这在高德API里就有详细的描述,不做过多赘述。

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
  • 地图加载
    显示地图就要有一个容器去承载地图,使用到高德地图的Map类构造一个地图(详见高德地图API参考手册–地图),在这里只展示我自己常使用的属性及方法。

    【常用属性】

    • layers【Array】:地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。
    • zoom【Number】:地图显示的缩放级别,若center未赋值,地图初始化默认显示用户所在城市范围 (取值范围在(pc上默认为3-18;移动端默认为3-19)以内。P.S 值越小显示区域越大
    • center【LngLat】:地图中心点坐标值(该数据类型为高德地图的一个基础类,其值为一个包含经度、纬度的数组,如 [116.397428, 39.90923]为北京的经纬度)
    • zooms【Array】:地图显示的缩放级别范围(取值范围同zoom,如[3,18])
    • animateEnable【Boolean】:地图平移过程中是否使用动画,默认为true
    • zoomEnable【Boolean】:地图是否可缩放,默认值为true
    • doubleCl
<think>我们参考站内引用,结合UniApp集成高德地图实现定位功能的常见方法,给出以下步骤:1.申请高德地图key:在官网注册并创建应用,获取key。2.在项目中引入高德地图SDK:通常通过<script>标签引入,但UniApp中需要特殊处理。3.使用高德地图API进行定位:调用高德地图的定位接口。注意:由于UniApp是跨端框架,可能需要区分H5和小程序等不同平台。这里以H5为例(小程序需要另外配置)。具步骤:步骤1:申请高德地图Key-访问高德开放平台(https://lbs.amap.com/),注册账号并登录。-进入控制台,创建新应用,选择“Web端(JS API)”。-为应用添加Key,安全设置中填写域名白名单(本地调试可以用*代替,上线需配置正式域名)。步骤2:在项目中引入高德地图JSAPI-在index.html(位于项目根目录)的<head>标签内引入高德地图JSAPI脚本:```html<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=您申请的key"></script>```-注意:将“您申请的key”替换为实际key。步骤3:创建地图容器-在页面的vue文件中,添加一个容器元素用于显示地图:```html<template><view><div id="mapContainer" style="width:100%; height:300px;"></div></view></template>```步骤4:初始化地图并定位-在mounted生命周期中初始化地图(注意:由于是H5,可以直接使用window.AMap)-使用高德地图的定位插件(需要额外引入插件,这里使用AMap.Geolocation)但是,在UniApp中直接使用可能会遇到“AMapis notdefined”的问题,这是因为UniApp的页面渲染机制导致。解决方法:-方案1:使用setTimeout延迟初始化,确保DOM已经渲染完成且高德地图JS加载完毕。-方案2:使用动态加载脚本的方式,确保脚本加载完成后再初始化。这里我们采用动态加载脚本的方式(更可靠):-在mounted中动态创建script标签,并监听加载完成事件。示例代码:```javascriptexportdefault {mounted() {//如果已经加载过,则直接初始化if(window.AMap){this.initMap();return;}//动态加载高德地图JSconstscript =document.createElement('script');script.type= 'text/javascript';script.src= `https://webapi.amap.com/maps?v=2.0&key=您申请的key&plugin=AMap.Geolocation`;//这里同时加载了定位插件script.onload =() =>{this.initMap();};document.head.appendChild(script);},methods:{initMap() {//初始化地图constmap =new AMap.Map('mapContainer',{zoom:13, //缩放级别resizeEnable:true});//使用定位插件const geolocation= newAMap.Geolocation({enableHighAccuracy:true,//是否使用高精度定位timeout:10000, //超时时间buttonPosition: 'RB',//定位按钮位置showMarker: true, //定位成功显示定位点showCircle: true//显示定位精度圆});map.addControl(geolocation);geolocation.getCurrentPosition((status, result) =>{if (status ==='complete') {//定位成功,result中包含了位置信息console.log(result);} else{//定位失败console.error(result);}});}}}```注意:以上代码在H5环境下运行。如果需要在微信小程序中使用,需要使用小程序专用的高德地图SDK,并且配置小程序安全域名等。另外,引用[3]中提到:在点击地图或者点击搜索列表的时候设置一个标记点。如果需要实现点击地图选点,可以监听地图的点击事件,然后添加标记。补充:如果需要在UniApp中同时兼容多端,建议使用条件编译,例如:```javascript//#ifdef H5//H5端使用上述高德地图JSAPI//#endif//#ifdef MP-WEIXIN//微信小程序端使用高德地图小程序SDK(需另外集成)// #endif```引用中提到的“getRegeo函数”和“getPoiAround”没有生效的问题,这里我们通过添加标记点来解决定位成功后的标记显示问题(代码中已经设置showMarker:true)。以上步骤实现了UniApp中集成高德地图实现定位功能。注意事项:-高德地图JS API仅适用于H5,不适用于小程序。-小程序端需要使用高德地图的小程序SDK,具可参考高德开放平台的小程序文档。如果遇到问题,请检查:1.key是否正确,且域名白名单是否配置(H5)。2.是否加载了定位插件(AMap.Geolocation)。3.动态加载脚本是否成功。参考文献:[^1]:uniapp结合高德地图实现地图随机选点(高德地图 ‘AMapis notdefined’问题的解决)[^2]: 【Uniapp】高德地图的接入、定位、自定义标点与信息窗使用[^3]: 【实战教程】Uni-App开发:轻松集成高德地图,实现精准位置选点功能相关问题:§§相关问题§§1. UniApp中如何集成高德地图实现微信小程序端的定位功能?2.如何在高德地图定位成功后显示自定义标记点?3.如何解决UniApp中使用高德地图时出现的“AMapis notdefined”错误?</think>### UniApp集成高德地图实现定位功能 在UniApp中集成高德地图实现定位功能,主要分为以下步骤: #### 1. **申请高德地图Key** - 访问[高德开放平台](https://lbs.amap.com/) - 注册账号 → 创建应用 → 选择「Web服务」类型 - 获取生成的`Key`(需保存后续使用) - ⚠️ **安全设置**:在应用配置中添加`uni-app`的域名白名单(如调试阶段可暂填`*`) #### 2. **引入高德地图SDK** 在`index.html`(位于项目根目录)中添加: ```html <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的KEY"></script> ``` #### 3. **实现定位功能** ```javascript export default { mounted() { // 动态加载高德地图SDK(避免AMap未定义错误) this.loadAMapScript().then(() => { this.initMap(); }); }, methods: { loadAMapScript() { return new Promise((resolve) => { if (window.AMap) return resolve(); const script = document.createElement('script'); script.src = `https://webapi.amap.com/maps?v=2.0&key=您的KEY`; script.onload = resolve; document.head.appendChild(script); }); }, initMap() { // 初始化地图 const map = new AMap.Map('mapContainer', { zoom: 15, resizeEnable: true }); // 添加定位控件 map.addControl(new AMap.Geolocation({ enableHighAccuracy: true, // 高精度定位 timeout: 10000, // 超时时间 buttonPosition: 'RB' // 按钮位置 })); // 获取当前位置 map.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation(); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { console.log('定位成功:', result); this.addMarker(map, result.position); // 添加标记点 } else { console.error('定位失败:', result); } }); }); }, addMarker(map, position) { new AMap.Marker({ map: map, position: position, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' }); map.setCenter(position); // 地图中心点移至定位位置 } } } ``` #### 4. **页面模板** ```html <template> <view> <!-- 地图容器 --> <div id="mapContainer" style="width:100%; height:80vh;"></div> </view> </template> ``` #### 5. **常见问题解决** - **`AMap is not defined` 错误**: - 确保SDK加载完成后再调用API(使用`loadAMapScript`的Promise方案) - 检查网络是否正常加载高德JS文件 - **定位不显示标记**: - 确认`addMarker`方法被正确调用 - 检查图标URL有效性(可使用默认图标) - **H5正常但小程序异常**: - 小程序需使用[高德小程序SDK](https://lbs.amap.com/api/wx/summary) - 通过条件编译实现多端兼容: ```javascript // #ifdef H5 // 上述H5代码 // #endif // #ifdef MP-WEIXIN // 微信小程序专用代码 // #endif ``` #### 6. **优化建议** - 添加**用户交互**:允许点击地图重新选点(监听`map.on('click')`事件) - 结合**逆地理编码**:将经纬度转换为具地址(使用`AMap.Geocoder`) - 使用**自定义图标**:通过`iconPath`替换默认标记图片 > **关键提示**:UniApp自带map组件功能有限且存在适配问题,高德地图在功能丰富性和稳定性上更具优势[^1]。若需实现复杂交互(如信息窗、周边搜索),建议直接使用高德原生API[^2][^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值