vue引入百度位置api

index.html引入js文件

  <script src="https://map.qq.com/api/gljs?v=1.exp&key=CFDBZ-OP53O-MOVWC-SKW43-7EUFF-WHBAC"></script>

安装axios

npm i axios

vue.config.js代码

  devServer:{
    open:true,
    host:'localhost',
    proxy:{
      'ws':{
        target:'https://apis.map.qq.com',
        changeOrigin:true
      }
    }
  }

map.vue完整代码

<template>
    <div id="map">

    </div>
</template>

<script setup>

import { onMounted } from 'vue'

import axios from 'axios';

onMounted(() => {

    console.log(1111);

    axios.get(`/ws/location/v1/ip?key=UM7BZ-UP2YJ-D6NFJ-FV6FO-OTKGQ-EHFWD&output=json`).then((res) => {


        console.log(res);


        var center = new TMap.LatLng(res.data.result.location.lat, res.data.result.location.lng)
        //定义map变量,调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('map'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });

        map.on('click', function (e) {
            console.log(e);
        });


    });


});
</script>

<style lang="scss" scoped></style>

 

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录