小程序map组件一——使用腾讯地图个性化地图组件、腾讯云可视化大屏展示

我是X大魔王

已于 2022-09-19 09:52:35 修改

阅读量2.6k

点赞数 1

分类专栏：微信小程序💡 文章标签：腾讯云小程序云计算

于 2022-09-18 15:08:42 首次发布

转载必须声明

本文链接：https://blog.csdn.net/Xmumu_/article/details/126915245

版权

微信小程序💡 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

记录一下过去两个月里我对“地图”的深入理解和玩法，这两个月被打磨的只要看到“地图”两个字都起鸡皮了😹😹

在这里插入图片描述

小程序组件map传送门：map-微信开发者文档

项目展示

在这里插入图片描述

腾讯地图开发

这里想要自定义个性化地图的话，是需要腾讯地图开发者应用Key的，成为开发者后直接去控制台创建一个应用即可，就可以得到这个Key值

在这里插入图片描述

找到这里的个性化样式

在这里插入图片描述

在这里插入图片描述
可以看到很多好看的地图样式，我觉得还是很够用的啦，弄好后直接点击直接使用按钮即可

小程序端[位置写死]

这里的subkey填写你的应用的key即可💭

<view class="container">
  <view class="map_container">
     <map id="myMap" longitude="{{longitude}}" latitude=" {{latitude}}" scale="14" show-location
  style="width: 100%; height: 100%;" subkey="23UBZ-KDUCF-YY6J5-NWKEI-FFCEF-RWBRH" enable-3D></map>
   </view>
</view>

less文件

page {
  background-color: linear-gradient(to bottom, #ffffff,#ffffff, #F6F6F6);
  padding-bottom: 60rpx;
}
.container{
  width: 100%;
  height: 100%;
  .map_container{
    width: 100%;
    height: 60vh;
    text-align: center;
  }
}

ts文件

// index.ts
const app = getApp<IAppOption>()
Page({
  data: {
    longitude: 113.3926, //地图界面中心的经度
    latitude: 22.51595, //地图界面中心的纬度
  },

  onLoad() {
   
  },

})

小程序端[获取实时位置]

直接改js代码就好里的onload方法就好

// index.ts
Page({
  data: {
    longitude: undefined, //地图界面中心的经度
    latitude: undefined, //地图界面中心的纬度
  },

  onLoad() {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res)
        that.setData({
          latitude : res.latitude,
          longitude : res.longitude
        });     
      }
     });
  },
})