uniapp高德地图坐标拾取
时间: 2025-01-10 09:32:34 浏览: 98
### 在 UniApp 中集成高德地图 API 实现坐标拾取功能
为了在 UniApp 中实现高德地图的坐标拾取功能,可以按照如下方法操作:
#### 准备工作
确保已经在项目中引入了必要的依赖库并申请好了高德开放平台的地图API Key。
#### 创建页面布局
创建一个新的 Vue 组件用于展示地图界面,在模板部分定义好容器结构以便放置地图实例以及交互按钮等控件。
```html
<template>
<view class="container">
<!-- 地图显示区 -->
<map id="myMap" :style="{ width: '100%', height: '80vh' }"></map>
<!-- 坐标输入框和其他控制组件 -->
<input v-model="longitudeLatitude" placeholder="点击获取经纬度"/>
<!-- 获取坐标的按钮 -->
<button @click="pickLocation">选取位置</button>
</view>
</template>
```
#### 初始化地图对象
通过 `onLoad` 生命周期钩子函数初始化地图插件,并设置初始中心点和缩放等级。这里需要注意的是要先加载 H5+ 插件环境下的 amap-js-api 库文件[^1]。
```javascript
<script>
export default {
data() {
return {
mapInstance: null,
longitudeLatitude: ''
};
},
onLoad(options) {
const that = this;
uni.requireNativePlugin('AMap').then((res) => {
res.init({
key: "您的高德开发者Key",
success(mapObj){
that.mapInstance = mapObj;
// 设置默认视图范围
that.mapInstance.setCenter([116.397428, 39.90923]);
that.mapInstance.zoomTo(10);
}
});
});
},
methods: {
pickLocation(){
let marker = new AMap.Marker({
position: [this.longitudeLatitude.split(',')[0], this.longitudeLatitude.split(',')[1]],
draggable:true
});
marker.on('dragend', function(e){
console.log(`新的经度纬度为:${e.lnglat.getLng()}, ${e.lnglat.getLat()}`);
this.longitudeLatitude=`${e.lnglat.getLng()},${e.lnglat.getLat()}`
}.bind(this));
this.mapInstance.add(marker);
this.mapInstance.on('click',(event)=>{
var lnglat = event.lnglat;
this.longitudeLatitude= `${lnglat.getLng()},${lnglat.getLat()}`;
marker.setPosition(lnglat);
})
}
}
}
</script>
```
此代码片段展示了如何利用高德地图 JavaScript API 来构建一个简单的坐标拾取工具。当用户单击地图上的任意一点时,会触发事件处理程序来更新输入字段中的坐标值;同时允许拖拽标记以调整所选地点的位置。
阅读全文
相关推荐



















