vue项目中使用腾讯地图(亲测好用)

2 篇文章 0 订阅

1.一定要先申请一个腾讯地图的KEY(自行百度)
2.引入地图(key=“就是你申请的key啦”)

<script src="https://map.qq.com/api/gljs?v=1.exp&key=ZADBZ-*********-NWO5Z-IVFV5"></script>

3.准备一个容器,用来存放地图的

<div class="container" id="mapContainer" style="width:800px;height:400px;"></div>

4.初始化地图()

// 地图初始化函数
    initMap() {
      console.log("window", window);
      // 定义地图中心点坐标
      let center = new window.TMap.LatLng(31.271694, 118.362938);
      // 定义map变量,调用 TMap.Map() 构造函数创建地图
      let map = new window.TMap.Map(document.getElementById("mapContainer"), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });
      //如果不给地图添加坐标点,这里可以忽略了,如果要添加请继续看(重点关注***markerLayer***)
      this.map = map;
      map.on("click", (e) => {
        
        this.markerLayer.setGeometries([]);
        const position = e.latLng;
        this.addImgMarker(position);
      });
    },

5.给地图添加坐标点

addImgMarker(data) {
      this.markerLayer = new TMap.MultiMarker({
        map: this.map,
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
          myStyle: new TMap.MarkerStyle({
            width: 25, // 点标记样式宽度(像素)
            height: 35, // 点标记样式高度(像素)
            src:
              "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", //图片路径
            //焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
            anchor: { x: 16, y: 32 },
          }),
        },
        //点标记数据数组
        geometries: [
          {
            id: "1", //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
            styleId: "myStyle", //指定样式id
            position: data, //点标记坐标位置
          },
        ],
      });
    },

6.调用初始化的地图

 mounted() {
    let that = this;
    this.markerLayer = new TMap.MultiMarker({});
    that.initMap();
  },

7.这是data中定义的值
markerLayer: {},
map: {},

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值