资讯专栏INFORMATION COLUMN

汇总在uniapp地图组件(map)使用与遇到的一些问题

3403771864 / 32人阅读

  你知道吗?uniapp是用vue.js开发所有前端应用的框架,开发人员只需要编写一套代码就可以发布到安卓、iOS、H5和小程序、快应用等平台,本篇文章就是为大家讲述相关内容。

  前言

  这段时间在开发uniapp的时候使用到map组件

  总结一下本次在uniapp中使用map遇到的一些问题

  文章分别是基础 定位图标  获取自身经纬度 通过经纬度获取当时城市信息

  首先先看实现效果

1.jpg

    首先引入map组件

  <template>
  <view class="content">
  <map style="width:100%;height:90vh;":layer-style='5':style="{height:mapheight}":show-location='true':latitude="latitude":longitude="longitude":markers="marker":scale="scale"markertap="markertap"callouttap='callouttap'>
  </map>
  </view>
  </template>
  <script>
  export default{
  data(){
  return{
  latitude:23.106574,//纬度
  longitude:113.324587,//经度
  scale:13,//缩放级别
  bottomData:false,
  marker:[
  {
  id:0,
  latitude:23.13065,//纬度
  longitude:113.3274,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  //title:'我在这里',//标注点名
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'天宝大厦',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:1234597,
  latitude:23.106574,//纬度
  longitude:113.324587,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  //title:'我在这里',//标注点名
  alpha:0.5,//透明度
  //label:{//为标记点旁边增加标签//因背景颜色H5不支持
  //color:'red',//文本颜色
  //},
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'广州塔',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:2,
  latitude:23.1338,//纬度
  longitude:113.33052,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'德隆大厦',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:3,
  latitude:23.136455,//纬度
  longitude:113.329002,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'羊城国际商贸中心',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:4,
  latitude:23.224781,//纬度
  longitude:113.293911,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'天瑞广场A座',//文本
  color:'#ffffff',//文字颜色
  fontSize:16,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'12',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:5,
  latitude:23.072726,//纬度
  longitude:113.277921,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'大米和小米儿童康复(广州盈丰)中心',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'8',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  ],
  }
  },
  onLoad(){
  },
  computed:{
  mapheight(){
  let data=''
  if(this.bottomData){
  if(this.upTop){
  data='50px'
  }else{
  data='200px'
  }
  }else{
  data='90vh'
  }
  return data
  },
  coverbottom(){
  let data=''
  if(this.bottomData){
  data='20rpx'
  }else{
  data='100rpx'
  }
  return data
  }
  },
  methods:{
  //地图点击事件
  markertap(e){
  console.log("===你点击了标记点===",e)
  },
  //地图点击事件
  callouttap(e){
  console.log('地图点击事件',e)
  }
  }
  }
  </script>

  实现获取样式如下:

2.jpg

  这是只有两个,更多可以去uniapp中搜索map | uni-app官网

  定位图标

 看官网网站中有没有详细代码内容,没有就是只有自己动手写一个,效果如下

  3.jpg

 

 <template>
  <view class="page-section page-section-gap map-container">
  <map style="width:100%;height:90vh;":layer-style='5':style="{height:mapheight}":show-location='true':latitude="latitude":longitude="longitude":markers="marker":scale="scale" markertap="markertap" callouttap='callouttap'>
  <cover-view:style='{bottom:coverbottom}' click="onControltap">
  <cover-image click="play"src=" /static/ditudingwei.png"></cover-image>
  <cover-view>
  定位
  </cover-view>
  </cover-view>
  </map>
  </view>
  </template>
  <script>
  export default{
  data(){
  return{
  latitude:23.106574,//纬度
  longitude:113.324587,//经度
  scale:13,//缩放级别
  bottomData:false,
  marker:[
  {
  id:0,
  latitude:23.13065,//纬度
  longitude:113.3274,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  //title:'我在这里',//标注点名
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'天宝大厦',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:1234597,
  latitude:23.106574,//纬度
  longitude:113.324587,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  //title:'我在这里',//标注点名
  alpha:0.5,//透明度
  //label:{//为标记点旁边增加标签//因背景颜色H5不支持
  //color:'red',//文本颜色
  //},
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'广州塔',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:2,
  latitude:23.1338,//纬度
  longitude:113.33052,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'德隆大厦',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:3,
  latitude:23.136455,//纬度
  longitude:113.329002,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'羊城国际商贸中心',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'10',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:4,
  latitude:23.224781,//纬度
  longitude:113.293911,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'天瑞广场A座',//文本
  color:'#ffffff',//文字颜色
  fontSize:16,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'12',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  {
  id:5,
  latitude:23.072726,//纬度
  longitude:113.277921,//经度
  iconPath:'',//显示的图标
  rotate:0,//旋转度数
  width:20,//宽
  height:30,//高
  alpha:0.5,//透明度
  callout:{//自定义标记点上方的气泡窗口点击有效
  content:'大米和小米儿童康复(广州盈丰)中心',//文本
  color:'#ffffff',//文字颜色
  fontSize:14,//文本大小
  borderRadius:15,//边框圆角
  borderWidth:'8',
  bgColor:'#e51860',//背景颜色
  display:'ALWAYS',//常显
  },
  },
  ],
  }
  },
  onLoad(){
  },
  computed:{
  mapheight(){
  let data=''
  if(this.bottomData){
  if(this.upTop){
  data='50px'
  }else{
  data='200px'
  }
  }else{
  data='90vh'
  }
  return data
  },
  coverbottom(){
  let data=''
  if(this.bottomData){
  data='20rpx'
  }else{
  data='100rpx'
  }
  return data
  }
  },
  methods:{
  //地图点击事件
  markertap(e){
  console.log("===你点击了标记点===",e)
  },
  //地图点击事件
  callouttap(e){
  console.log('地图点击事件',e)
  }
  }
  }
  </script>
  <stylescoped>
  .map-container{
  position:relative;
  overflow:hidden;
  .cover-view{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:80rpx;
  height:80rpx;
  color:#484848;
  background-color:#fff;
  background-size:120rpx 120rpx;
  background-position:center center;
  position:absolute;
  bottom:100rpx;
  right:32rpx;
  }
  .cover-image{
  display:inline-block;
  width:30rpx;
  height:30rpx;
  }
  }
  </style>

  获取自身经纬度

  进入页面拿到用户自身的经纬度

  在onShow中输入

  onShow() {
  uni.getLocation({
  geocode:true,
  type: 'wgs84',
  success: (res) => {
  console.log(res,'获取当前位置')
  },
  address:(res) =>{
  console.log('address',res)
  }
  });

4.png

  需要打开manifest.json

5.png

  如果从来没配置过appld请先配置在进行操作

6.png

7.png

  然后重新编译就会出现

8.jpg

  允许之后就可以拿到经纬度信息

9.png

  然后可以将经纬度信息赋值给data中的latitudelongitude 

 onShow() {
  uni.getLocation({
  geocode:true,
  type: 'wgs84',
  success: (res) => {
  console.log(res,'获取当前位置')
  this.longitude =res.longitude
  this.latitude = res.latitude
  },
  address:(res) =>{
  console.log('address',res)
  }
  });
  },

  通过经纬度 获取当前城市信息

  首先需要进入腾讯位置服务 /控制台/应用管理/我的应用/添加key选择webServiceApi

10.png

  然后去小程序开发管理/开发设置/服务器域名/request合法域名后面新增

  https://apis.map.qq.com;

  然后下载

  https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip

  引入

11.png

  在ohshow中使用

  var qqmapsdk
  // 实例化API核心类
  qqmapsdk = new QQMapWX({
  key: '创建的key'
  });
  qqmapsdk.reverseGeocoder({
  location:{
  latitude:this.latitude,
  longitude:this.longitude
  },
  success:(res)=>{
  console.log('reverseGeocoder',res)
  },
  fail:(err)=>{
  console.log('reverseGeocoder',err)
  }
  })

  这样就可以实现获取自身详细经纬度。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/128380.html

相关文章

  • Java 初学者做第一个微信小程序总结--关于Java基础

    ...问题可以这了查找或询问。 Github 微信小程序开发资源汇总 不可错过! UI 开源框架 WePY - 支持组件小程序开发框架 mpvue - 基于 Vue.js 小程序开发框架,从底层支持 Vue.js 语法和构建工具体系 taro - 使用 React 方式开发...

    mudiyouyou 评论0 收藏0
  • 百度地图开发实例番外篇--实用方法(持续更新)

    一 前言 使用百度地图开发过程中,查阅百度地图官网demo基本上就能满足开发需求,但是有时候需要设置一些东西,很难官网上查阅到相关方法技巧。笔者特意把开发过程中遇到一些疑难杂症和解决方式总结出...

    CocoaChina 评论0 收藏0
  • vue 地图可视化 mapbox篇(2)

    ...l-color": "#627BC1", "fill-opacity": 0.1 } }) 思路汇总:通过上面三步走思路,我们可以把组件粗略分成三部分 核心mapbox.vue是地图视图 可视化图表由echarts-gl组成 动作及拓展对地图视图和图表进行操作 效果图: ...

    _DangJin 评论0 收藏0
  • uniapp table 组件

    uniapp是2019年非常火爆一个Dcloud开发跨平台前端工具,支持ios android wap,小程序,除了android有点卡外,其他暂时没有发现什么瑕疵。 最近捣鼓uniapp项目,恰好用到table组件,之前写了个demo,后面一直都想写一个像样...

    Vultr 评论0 收藏0
  • 第三方库

    ...植入总结: android 支付宝植… React-BMap-基于react和百度地图JavaScript API组件库 React-BMap npm version 基于百度地图JavaScript Api封装React组件库,使用这个库最好需要先了解React和百度地图JavaScript Api。 React-BMap只是利用了React组件...

    seanHai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<