0、效果
1、安装
NPM 安装 Loader
npm i @amap/amap-jsapi-loader --save2、显示代码
<template>
<view class="uni-container">
<uni-forms ref="form" :model="formData" validateTrigger="bind">
<view class="uni-stat--x p-m">
<view class="card-header">位置信息</view>
<uni-row>
<uni-col :xs="24" :sm="11">
<uni-forms-item name="address" label="详细地址" :label-width="labelWidth" label-align="right">
<uni-easyinput type="textarea" placeholder="请填写详细地址" v-model="formData.address" trim="both"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="longitude" label="经度" :label-width="labelWidth" label-align="right">
<uni-easyinput placeholder="请选择经度" v-model="formData.longitude" trim="both" disabled></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="latitude" label="纬度" :label-width="labelWidth" label-align="right">
<uni-easyinput placeholder="请选择纬度" v-model="formData.latitude" trim="both" disabled></uni-easyinput>
</uni-forms-item>
</uni-col>
<uni-col :xs="24" :sm="11" :push="1">
<view id="map">
</view>
</uni-col>
</uni-row>
</view>
<view class="uni-button-group">
<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
<navigator open-type="navigateBack" style="margin-left: 15px;">
<button class="uni-button" style="width: 100px;">返回</button>
</navigator>
</view>
</uni-forms>
</view>
</template>3、引用Amap
<script>
//引入 amap-jsapi-loader
import AMapLoader from "@amap/amap-jsapi-loader";
//安全密钥引入
window._AMapSecurityConfig = {
securityJsCode: "密钥",
};
export default {
data() {
return {
map: null, //高德实例
marker: null, //点标记 Marker
geocoder: null, //逆向地理
labelWidth: 90,
formData: {
"address": null,
"longitude": null,
"latitude": null
}
}
},
onLoad() {
this.initMap();
},
methods: {
//初始化
initMap() {
AMapLoader.load({
key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.CitySearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
// 实例化
this.map = new AMap.Map("map", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 16, //初始化地图级别
});
// 自动获取用户IP，返回当前城市
let citysearch = new AMap.CitySearch();
citysearch.getLocalCity((status, result) => {
if (status === "complete" && result.info === "OK") {
console.log(result);
}
});
// 地图点击事件--点标记标注
this.map.on("click", this.handleClick);
// 逆向地理编码插件
this.geocoder = new AMap.Geocoder({
radius: 1000, //范围，默认：500
});
})
.catch((e) => {
console.log(e);
});
},
// 地图点击之后更新点标记
handleClick(e) {
let longitude = e.lnglat.getLng(); //经度
let latitude = e.lnglat.getLat(); //纬度
this.formData.longitude = longitude
this.formData.latitude = latitude
// 逆向地理编码
this.geocoder.getAddress([longitude, latitude], (status, result) => {
if (status === "complete" && result.info == "OK") {
let address = result.regeocode.formattedAddress;
this.formData.address = address
// 更新点标记
this.updateMap(address, [longitude, latitude]);
} else {
console.log("定位失败，请稍后重试");
}
});
},
// 更新点标记
updateMap(address, lnglat) {
// 移除已创建的 marker
if (this.marker) this.map.remove(this.marker);
// 同时设置地图中心点和缩放级别
this.map.setZoomAndCenter(16, lnglat);
// 自定义标记点
this.marker = new AMap.Marker({
position: lnglat,
icon: "http://vdata.amap.com/icons/b18/1/2.png",
anchor: "top-center",
offset: new AMap.Pixel(-10, -10),
});
// 添加到实例
this.marker.setMap(this.map);
// 设置label标签，label默认蓝框白底左上角显示，样式className为：amap-marker-label
this.marker.setLabel({
direction: "top-center",
offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
content: "<div style='width:250px;'>" + address + "</div>", //设置文本标注内容
});
},
}
}
</script>
