腾讯位置服务

腾讯位置服务_第1张图片

1:账号申请

账户申请链接:https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

腾讯位置服务_第2张图片

 2:添加应用和key

添加应用链接:https://lbs.qq.com/dev/console/application/mine

 1:创建应用

腾讯位置服务_第3张图片

2:添加key

腾讯位置服务_第4张图片

腾讯位置服务_第5张图片

小程序的id:

微信小程序链接微信扫码登录:https://mp.weixin.qq.com/

腾讯位置服务_第6张图片

腾讯位置服务_第7张图片

3:使用

1:html文件使用




    
    Hello world!
    
    
    
    



    
    

2:.vue文件使用

1:在主文件入口dns引入

腾讯位置服务_第8张图片

代码:



2:.vue文件的页面使用

腾讯位置服务_第9张图片

代码html部分:


代码js部分:


export default {
  components: {
  },
  data () {
    return {
    };
  },
  created () {
  },
  mounted () {
    this.initMap();
  },
  methods:{
    initMap() {
      console.log(this.$refs.container)
      //定义地图中心点坐标 111.202972, 34.824371  
      //new window.TMap.LatLng()/new TMap.LatLng()
      let center = new TMap.LatLng(39.98412, 116.307484);
      //定义map变量,调用 TMap.Map() 构造函数创建地图
      //new window.TMap.LatLng()/new TMap.LatLng
      let map = new TMap.Map(this.$refs.container, {
        center: center, //设置地图中心点坐标
        zoom: 17.2, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45, //设置地图旋转角度
      });
    },
  }
}

你可能感兴趣的:(html5,javascript)