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

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

小程序组件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>
1
2
3
4
5
6

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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

ts文件

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

  onLoad() {
   
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13

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

直接改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
        });     
      }
     });
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

腾讯云可视化

最近有免费试用馆，发现有这个东西，以前没玩过，所以才想试试，效果还不错，很简单的操作，只要进去了啥都会了😹😹
这里使用的是腾讯云图TCV
大家可以去试一试，玩一玩，这篇博客内容比较少，也比较简单，主要是把内容都拆开来了，有任何问题评论区见吧，欢迎关注后续内容，再见~