uniapp 高德地图显示

1. uniapp 高德地图显示

  使用前需到**高德开放平台(https://lbs.amap.com/)**创建应用并申请Key
  登录 高德开放平台,进入“控制台”,如果没有注册账号请先根据页面提示注册账号
  打开 “应用管理” -> “我的应用”页面,点击“创建新应用”,根据页面提示填写内容创建应用
  在应用下点击“添加”为应用添加Key,根据需要分别为Android平台、iOS平台申请Key
  配置使用高德地图
  准备:https://lbs.amap.com/api/javascript-api-v2/prerequisites
  uni-app(map)https://uniapp.dcloud.net.cn/component/map.html

1.1. 登录控制台

  (1)登录 高德开放平台控制台,如果没有开发者账号,请 注册开发者
  (2)创建 key,进入应用管理,创建新应用,新应用中添加 key,服务平台选择 Web端(JS API)。
在这里插入图片描述
  (3)获取 key 和密钥。创建成功后,可获取 key 和安全密钥。
在这里插入图片描述
  (4)配置manifest.json
在这里插入图片描述

在这里插入图片描述

<template>
	<view>
		<!-- 地图 -->
		<map style="width: 100%; height: 300px;" :latitude="latitude" 
		:longitude="longitude" :markers="markers" :scale="scale">
		</map>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				longitude: 108.952,
				latitude: 34.223,
				scale:5,
				 markers: [{
				longitude: 108.952,
				latitude: 34.223,
					iconPath: '../../static/image/home-active.png',
					width:30,
					height:30
				}],
		}
	}
}
</script>
<style>
</style>

在这里插入图片描述

  • 14
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值