(资料图片)

前端Vue基于腾讯地图Api实现的选择位置组件 返回地址名称详细地址经纬度信息，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13310

效果图如下：

使用方法

<script>// 引入设置地址存储工具import {setlocation} from "./utils.js"// #ifdef H5window.addEventListener("message", event => {// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息var loc = event.data;if (loc && loc.module == "locationPicker") {//防止其他应用也会向该页面post信息，需判断module是否为"locationPicker"let location = {poiaddress: loc.poiaddress,poiname: loc.poiname,latlng: loc.latlng}// 设置存储地址信息setlocation(location)uni.navigateBack();}}, false);// #endif</script>

HTML代码实现部分

<script>import ccInputView from "../../components/ccInputView.vue"// 获取地址工具import {getlocation} from "./utils.js"export default {components: {ccInputView},data() {return {mapSelData: {"latlng": {}},}},/*** 生命周期函数--监听页面显示*/onShow: function() {// #ifdef H5let locations = getlocation() //获取位置信息if (locations) {this.mapSelData = locationsuni.clearStorageSync();}// #endif},methods: {formSubmit: function(e) {console.log("form发生了submit事件，携带数据为：" + JSON.stringify(e));var formdata = e.detail.value;uni.showModal({title: "温馨提示",content: "formsubmit事件携带数据为：" + JSON.stringify(e.detail.value)})},// 选择地址chooseAddress(e) {let myThis = this;uni.navigateTo({url: "./h5map"})},}}</script>