react腾讯地图

发布时间 2023-09-13 08:44:05作者: zjxgdq
Older children:
import React, { useEffect } from 'react';
// https://lbs.qq.com/faq/webFaq/jsApiGl
export default function Index() {
  const handleMap = () => {
    console.log('window', window);

    const windowMap: any = window;
    //     console.log(window);

    const BMTMap = windowMap.TMap;
    var center = new BMTMap.LatLng(29.78013, 121.9664);
    var map = new BMTMap.Map('container', {
      rotation: 20, //设置地图旋转角度
      pitch: 30, //设置俯仰角度(0~45)
      zoom: 12, //设置地图缩放级别
      center: center //设置地图中心点坐标
    });
    var position: any = document.getElementById('position');
    var bounds: any = document.getElementById('bounds');
    map.on('bounds_changed', function () {
      var mapCenter = map.getCenter(); //获取地图中心点坐标
      position.innerHTML = mapCenter.getLat().toFixed(6) + ',' + mapCenter.getLng().toFixed(6);
      var mapBounds = map.getBounds(); //获取当前地图的视野范围
      if (mapBounds) {
        var nothEast =
          '当前可视区域范围:东北/右上:[' +
          mapBounds.getNorthEast().getLat().toFixed(6) +
          ',' +
          mapBounds.getNorthEast().getLng().toFixed(6) +
          '] ;';
        var southWest =
          '西南/左下:[' +
          mapBounds.getSouthWest().getLat().toFixed(6) +
          ',' +
          mapBounds.getSouthWest().getLng().toFixed(6) +
          ']';
        bounds.innerHTML = nothEast + southWest;
      }
    });
    let info = new BMTMap.InfoWindow({
        map,
        position: map.getCenter()
      }).close();
      map.on('click', (evt:any) => {
        // 获取click事件返回的poi信息
        let poi = evt.poi;
        if (poi) {
          // 拾取到POI
          info.setContent(poi.name).setPosition(poi.latLng).open();
        } else {
          // 没有拾取到POI
          info.close();
        }
      });
      var infoWindow = new BMTMap.InfoWindow({
        map: map, 
        position: center, //设置信息框位置
        content: 'Hello World!', //设置信息框内容
    });
  };
  useEffect(() => {
    handleMap();
  }, []);
  return (
    <div>
      <div
        style={{ position: 'relative', width: '100%', height: '1000p

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