vue如何使用腾讯地图申请key值，实现定位，点击可查看提示信息

缺乏、安全感 2023-03-04 09:29 23阅读 0赞

## 如何申请腾讯key ##

要使用腾讯地图，首先要有个key

1.首先通过这个链接（官网：https://lbs.qq.com/javascript\_v2）进去后，完成注册。

2.完成注册后，按下图操作即可：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]  
3.进入如下页面，把信息填写完整，点击提交就可以了哦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70]

## 使用腾讯地图实现位置的显示，点击可查看信息 ##

1.效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 2]  
2.首先在vue项目中引入在线的腾讯地图

在index.html中：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title></title>
        <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=申请的密匙"></script>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

3.具体代码：

<template>
        <div class="map1">
          <div id="contain" class="map"></div>
        </div>
    </template>
    
    <script>
      import $ from 'jquery';
        export default { 
            name: "Map",
            data(){ 
              return{ 
                list:[]
              }
          },
          created(){ 
            let that = this;
            const id = localStorage.getItem('ID');
            $.ajax({ 
              type: "调接口的方式",
              url: "接口",
              data:{ id:id},   //需要传的参数
              async:false,    
              cache:false,
              dataType: 'json',
              success: function(data) { 
                console.log(data);
                that.list=data.data.list
              },
              error: function(data) { 
                // 请求失败函数
                console.log(data);
              }
            });
          },
          mounted(){ 
            this.TencentMap ();
          },
          methods: { 
            TencentMap(){ 
              //设置地图中心点
              var myLatlng = new qq.maps.LatLng(29.2425293555,120.1603265795);
              //定义工厂模式函数
              var myOptions = { 
                zoom: 13,               //设置地图缩放级别
                center: myLatlng,      //设置中心点
                mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
              }
              //获取dom元素添加地图信息
              var map = new qq.maps.Map(document.getElementById("contain"), myOptions);
              //给中心点加个图标
              new qq.maps.Marker({ 
                position: myLatlng,
                map: map
              });
              //添加提示窗
              var infoWin = new qq.maps.InfoWindow({ 
                map: map
              });
              var arr = this.list;
              //添加标记
              for(let i=0;i<arr.length;i++){ 
                console.log(i);
                var marker = new qq.maps.Marker({ 
                  position:new qq.maps.LatLng(arr[i].lat,arr[i].lng),
                  map:map,
                });
                //给mark添加自定义图标
                var anchor = new qq.maps.Point(0, 10),
                  size = new qq.maps.Size(42, 68),
                  origin = new qq.maps.Point(0, 0),
                  markerIcon = new qq.maps.MarkerImage(
                    arr[i].mini_img,
                    size,
                    origin,
                    anchor
                  );
                marker.setIcon(markerIcon);
                //给mark点添加名字
                marker.libraryName = "姓名："+arr[i].nickname;
                marker.Number = "手机："+arr[i].mobile;
                marker.cate = "其他："+arr[i].cate_name;
                qq.maps.event.addListener(marker, 'click', function() { 
                  infoWin.open();
                  infoWin.setContent('<div style="white-space:nowrap;margin:10px 20px;"> ' + this.libraryName+'<br/>'+this.Number+'<br/>'+this.cate);
                  //提示窗位置
                  infoWin.setPosition(new qq.maps.LatLng(arr[i].lat,arr[i].lng));
                })
              }
            },
        }
    </script>
    
    <style scoped>
      .map1{ 
        width: 100%;
        height: 100%;
      }
      #contain { 
        width: 100%;
        height: 700px;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/2e83466be8684aa68eb8c6ecddb50c31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70]: /images/20230208/ec285521ad09409ba8e703e29633769c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/fa46f064979b4ed5b4ae664c39856090.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230208/8759c49feb6340c6b5afe27beadf9e66.png