uniapp调用高德api

主要包含:
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/[email protected]"></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:{
   
   
					latitude:0,
					longitude:0

你可能感兴趣的:(uni-app,小程序,前端,vue.js)