luoxuancong
Series

腾讯地图API开发教程 - JavaScript地图应用实战

luoxuancong2025-01-15MAP地图开发前端开发

腾讯地图 JavaScript API 开发指南

TIP

腾讯地图 JavaScript API 是腾讯提供的免费地图开发接口，适用于 Web 端地图应用开发。

准备工作

1. 申请开发者 Key

  1. 访问 腾讯位置服务open in new window
  2. 注册/登录账号
  3. 进入控制台 → 应用管理 → 创建应用
  4. 获取 Key（密钥）

2. 引入地图 API

<!-- 在 HTML 中引入腾讯地图 JS API -->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

基础使用

初始化地图

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>腾讯地图示例</title>
  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>
  <script>
    // 初始化地图
    var center = new TMap.LatLng(39.908802, 116.397502); // 北京天安门
    var map = new TMap.Map('map', {
      center: center,
      zoom: 15
    });
  </script>
</body>
</html>

添加标记点

// 创建标记点
var marker = new TMap.MultiMarker({
  map: map,
  styles: {
    "default": new TMap.MarkerStyle({
      width: 25,
      height: 35,
      anchor: { x: 16, y: 32 }
    })
  },
  geometries: [
    {
      id: "marker1",
      styleId: "default",
      position: new TMap.LatLng(39.908802, 116.397502),
      properties: {
        title: "天安门"
      }
    }
  ]
});

常用功能

信息窗口

// 创建信息窗口
var infoWindow = new TMap.InfoWindow({
  map: map,
  position: new TMap.LatLng(39.908802, 116.397502),
  content: '<div style="padding: 10px;">这里是天安门</div>'
});

// 显示信息窗口
infoWindow.open();

// 关闭信息窗口
// infoWindow.close();

绑定点击事件

// 点击地图获取坐标
map.on("click", function(evt) {
  console.log("点击位置：", evt.latLng.lat, evt.latLng.lng);
});

// 点击标记点
marker.on("click", function(evt) {
  console.log("点击了标记点：", evt.geometry.id);
});

路线规划

// 驾车路线规划
var driving = new TMap.service.Driving({
  map: map
});

driving.search({
  from: new TMap.LatLng(39.908802, 116.397502), // 起点
  to: new TMap.LatLng(39.915599, 116.434298)     // 终点
}).then(function(result) {
  console.log("路线规划结果：", result);
});

Vue 项目中使用

安装配置

// main.js 中全局引入
const loadTencentMap = () => {
  return new Promise((resolve, reject) => {
    if (window.TMap) {
      resolve(window.TMap);
      return;
    }
    
    const script = document.createElement('script');
    script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY';
    script.onload = () => resolve(window.TMap);
    script.onerror = reject;
    document.head.appendChild(script);
  });
};

export { loadTencentMap };

组件中使用

<template>
  <div id="tencent-map" ref="mapContainer"></div>
</template>

<script>
import { loadTencentMap } from '@/utils/map';

export default {
  data() {
    return {
      map: null
    };
  },
  async mounted() {
    await loadTencentMap();
    this.initMap();
  },
  methods: {
    initMap() {
      const center = new TMap.LatLng(39.908802, 116.397502);
      this.map = new TMap.Map(this.$refs.mapContainer, {
        center: center,
        zoom: 15
      });
    },
    addMarker(lat, lng, title) {
      new TMap.MultiMarker({
        map: this.map,
        geometries: [{
          position: new TMap.LatLng(lat, lng),
          properties: { title }
        }]
      });
    }
  }
};
</script>

<style scoped>
#tencent-map {
  width: 100%;
  height: 400px;
}
</style>

常见问题

Q1: 地图加载失败

可能原因：

  1. Key 无效或过期
  2. 域名未在控制台白名单中
  3. 网络问题

解决方案：检查 Key 配置，在腾讯位置服务控制台添加域名白名单。

Q2: 如何获取当前位置？

// 使用浏览器定位
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    console.log("当前位置：", lat, lng);
  });
}

相关链接

0  /  500  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8
ON THIS PAGE