主要包含:
1、uniapp调用高德地图的微信sdk
2、实现坐标和经纬度互相转换功能
3、实现关键字检索功能
说明:页面以uniapp编写,使用uniapp官方map组件,cover-view处理原生组件层级问题。
以下是单个页面布局和业务逻辑:
<!--地图选择界面-->
<template>
<view class="pageMap">
<view class="head">
<WhiteHead :title="title"></WhiteHead>
</view>
<!--地图-->
<map
id="container"
style="width:100%;height:88%;position:absolute;bottom:0;"
:latitude="latitude"
:longitude="longitude"
:markers="covers"
>
<cover-view class="serch">
<cover-view class="serchInput">
<cover-image class="cover-image" src="https://admin.dajxyl.com/oss?path=img/sousuo_2@2x.png"></cover-image>
<cover-view class='text'>{
{
inputInfo}}</cover-view>
<input class='input' :value='inputModel' focus @input='blurInput'></input>
</cover-view>
</cover-view>
<cover-view class="cover-views" @tap="onControltap"></cover-view>
<cover-view class="addressDetail">
<cover-view class="addressDetail_content">
<cover-view class="addressDetail_content_h4">详细地址:</cover-view>
<cover-view class="addressDetail_content_p">
<cover-view class="p">{
{
description}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
<cover-view class="btn">
<button type="primary" @click="submit">保存</button>
</cover-view>
<cover-view class="poiList" :style="visibal?'':'display:none'">
<cover-view class="views">
<cover-view class="poiList_item" @click="selectItem(k)" v-for="(i,k) in poiList.poisData" :key="k">{
{
i.name}}</cover-view>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
import WhiteHead from '../../components/whiteHead/whiteHead.vue';
import {
mapState,mapMutations } from 'vuex';
import amapFile from '../../lib/amap-wx.js';
export default {
components:{
WhiteHead
},
data() {
return {
id:0, // 使用 marker点击事件 需要填写id
title:'选择地址',
latitude: 39.909,
longitude: 116.39742,
//地图上选点的经纬度
lie: