【转载】Vue 引入腾讯地图

2023年4月14日 3条评论 880次阅读 0人点赞慕容

转自：https://www.cnblogs.com/majiayin/p/15671867.html

//如果在根目录没找到 index.html ，那你的项目可能是用 vue-cli 搭建的。 在 public 里面可以找到 index.html
//这俩行代码丢进去就行了
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key= 腾讯地图-控制台-添加应用生成的key "></script>
  <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

从头到尾复制进去就行了。

<div id="container" style="width:600px;height:500px;"></div>

//初始化地图
    initMap(){

      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
      //定义工厂模式函数
      var myOptions = {
        zoom: 8,               //设置地图缩放级别
        center: myLatlng,      //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
      }
      //获取dom元素添加地图信息
      var map = new qq.maps.Map(document.getElementById("container"), myOptions);

    },

进阶玩法：

//请求失败会再次调用方法去请求

showErr() {
      this.Tmap(); //定位失败再请求定位，测试使用
    },

//获取城市和经纬度
    showPosition(position) {
      this.latitude = position.lat;
      this.longitude = position.lng;
      this.city = position.city;

      this.initMap()

    },

//获取定位

//获取定位
    Tmap() {
      var geolocation = new qq.maps.Geolocation("KKSBZ-53WRP-GBSD7-LE373-SGAQO-6UB7I", "mapqq");
      // geolocation.getIpLocation(this.showPosition, this.showErr);
      geolocation.getLocation(this.showPosition, this.showErr); //或者用getLocation精确度比较高
    },

//地图添加覆盖物

//设置圆形覆盖物的颜色和透明度rgba
      var circle_color = new qq.maps.Color(
        Number(170),
        Number(204),
        Number(238),
      0.5);

      var circles = new qq.maps.Circle({
        center : myLatlng, // 设置中心店
        radius:100, // 范围大小 
        strokeWeight:2, // 宽度设置
        fillColor:circle_color, //填充颜色
        map: map
      })

//地图初始化

//初始化地图
    initMap(){

      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
      //定义工厂模式函数
      var myOptions = {
        zoom: 15,               //设置地图缩放级别
        center: myLatlng,      //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
      }

      //获取dom元素添加地图信息
      var map = new qq.maps.Map(document.getElementById("container"), myOptions);

      //地图标点 => 单点
      var marker = new qq.maps.Marker({
        position: myLatlng ,
        map: map
      });

    },

RouletteRogue说道：

2025年12月5日 03:43

Google Chrome Windows 10
https://t.me/s/Sol_officials
AceSorcerer说道：

2025年12月23日 14:57

Google Chrome Windows 10
https://t.me/kazino_s_minimalnym_depozitom/25
HighRollerMage说道：

2026年1月22日 09:19

Google Chrome Windows 10
В джунглях ставок, где всякий ресурс пытается заманить гарантиями быстрых призов, рейтинг интернет казино превращается именно той ориентиром, что направляет через ловушки обмана. Игрокам ветеранов и новичков, которые пресытился из-за фальшивых заверений, такой инструмент, дабы почувствовать реальную выплату, будто вес ценной монеты на ладони. Без пустой ерунды, лишь проверенные клубы, где выигрыш не лишь число, но реальная удача.Подобрано по гугловых поисков, как ловушка, что вылавливает самые свежие веяния в сети. В нём минуя роли для стандартных приёмов, каждый элемент будто ход на игре, где подвох раскрывается сразу. Хайроллеры видят: по рунете манера письма и иронией, в котором ирония притворяется под совет, позволяет миновать рисков.На https://www.don8play.ru/ данный рейтинг ждёт будто раскрытая колода, готовый на игре. Загляни, если желаешь ощутить пульс реальной игры, минуя мифов да разочарований. Игрокам кто знает ощущение выигрыша, он словно держать ставку у пальцах, минуя пялиться по дисплей.

慕容的工作随笔

【转载】Vue 引入腾讯地图

发表回复