uniapp调用高德api

本文介绍如何在uniapp中调用高德地图的微信SDK,实现了包括坐标和经纬度转换、关键字检索等功能。通过uniapp的map组件及cover-view解决原生组件层级问题,详细阐述了页面布局和业务逻辑。
摘要由CSDN通过智能技术生成
主要包含:
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:
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值