react引入腾讯地图

import React from 'react';

let key = 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX';
export default class Qq_map extends React.Component {
  componentDidMount() {
    this.initMap();
  }

// 创建TMap方法
  TMap = key => {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        resolve(qq);
      };
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=' + key;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

  initMap = () => {
    //设置中心坐标
    let tarLat = 39.984120;
    let tarLng = 116.307484;
    this.TMap(key).then(qq => {
      //初始化经纬度，最开始的点
      let myLatlng = new qq.maps.LatLng(tarLat, tarLng);
      //设置地图属性
      let myOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP,
      };
      //创建地图，绑定dom
      this.map = new qq.maps.Map(document.getElementById('myMap'), myOptions);
      //现实已经存在的点
      let markerlast = new qq.maps.Marker({
        position: myLatlng,
        map: this.map,
      });
    });
  };

  render() {
    return <div id="myMap" />;
  }
}