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" />;
}
}
React引入腾讯地图
最新推荐文章于 2024-04-24 15:27:53 发布