Vue 引用腾讯地图 JavaScript API GL

53 阅读1分钟

官网地址 lbs.qq.com/

官网demo lbs.qq.com/webDemoCent…

<template>
  <div id="container" style="width: 100%; height: 100%"></div>
</template>

<script
  charset="utf-8"
  src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
></script>

<script>
export default {
  name: "Home",
  data() {
    return {}
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      var center = new TMap.LatLng(39.984104, 116.307503)
      //初始化地图
      var map = new TMap.Map("container", {
        rotation: 20, //设置地图旋转角度
        pitch: 30, //设置俯仰角度(0~45zoom: 12, //设置地图缩放级别
        center: center //设置地图中心点坐标
      })
      // marker文字在图片内
      new TMap.MultiMarker({
        map: map,
        styles: {
          small: new TMap.MarkerStyle({
            // 点标注的相关样式
            width: 34, // 宽度
            height: 46, // 高度
            anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
            src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png", // 标注点图片url或base64地址
            color: "#333", // 标注点文本颜色
            size: 16, // 标注点文本文字大小
            direction: "bottom", // 标注点文本文字相对于标注点图片的方位
            offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
            strokeColor: "#fff", // 标注点文本描边颜色
            strokeWidth: 2 // 标注点文本描边宽度
          }),
          default: new TMap.MarkerStyle({
            width: 92, // 宽度
            height: 92, // 高度
            anchor: { x: 46, y: 46 }, // 锚点位置
            src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/circle.png", // 标注点图片url或base64地址
            color: "#fff", // 标注点文本颜色
            size: 22, // 标注点文本文字大小
            offset: { x: 0, y: 16 } // 标注点文本文字基于direction方位的偏移属性
          })
        },
        geometries: [
          {
            styleId: "small",
            position: new TMap.LatLng(39.9543498091366, 116.3064286563349), // 标注点位置
            content: "41" // 标注点文本
          },
          {
            position: new TMap.LatLng(39.9891175495767, 116.28076993243667),
            content: "34"
          },
          {
            position: new TMap.LatLng(39.95959650879512, 116.26144674251236),
            content: "9"
          },
          {
            position: new TMap.LatLng(39.96950944017182, 116.34323407250122),
            content: "7"
          }
        ]
      })
    }
  }
}