腾讯地图
先在腾讯地图注册账户,邮件确认验证,申请key
https://lbs.qq.com/console/customized/log/?console=customizedLog
在 public/index.html 中引入脚本文件
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB"></script>
在 css 样式中设置容器宽高
#container{
min-width:100%;
min-height:300px;
}
在组件页编写容器
<div id="container"></div>
在组件页的钩子函数中编写代码
componentDidMount(){
//https://lbs.qq.com/javascript_v2/doc/index.html
var qq = window.qq;
/*
setTimeout(()=>{
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.916527, 116.397128), // 地图的中心地理坐标
zoom: 8, // 地图缩放级别
mapStyleId: 'style1', // 该key绑定的style1对应于经典地图样式,若未绑定将弹出无权限提示窗
});
//setTimeout(()=>{
//https://lbs.qq.com/javascript_v2/doc/cityservice.html
//设置城市信息查询服务
var citylocation = new qq.maps.CityService();
//请求成功回调函数
citylocation.setComplete(function(result) {
var zb = result.detail.latLng;
//console.log(zb)
map.setCenter(zb);
map.setZoom(15);
//https://lbs.qq.com/javascript_v2/doc/marker.html
//创建一个Marker
var marker = new qq.maps.Marker({
//设置Marker的位置坐标
position: zb,
//设置显示Marker的地图
map: map
});
//设置Marker是否可以被拖拽,为true时可拖拽,false时不可拖拽,默认属性为false
marker.setDraggable(true);
//设置Marker停止拖动事件
qq.maps.event.addListener(marker, 'dragend', function() {
console.log(marker.getPosition())
console.log(map.getZoom())
});
});
citylocation.searchCityByName('太原市');
//}, 3100)
}, 100)
*/
//{lat: 37.80789920419703, lng: 112.56275080159814}
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(37.80789920419703, 112.56275080159814), // 地图的中心地理坐标
zoom: 18, // 地图缩放级别
mapStyleId: 'style1', // 该key绑定的style1对应于经典地图样式,若未绑定将弹出无权限提示窗
});
var marker = new qq.maps.Marker({
//设置Marker的位置坐标
position: new qq.maps.LatLng(37.80789920419703, 112.56275080159814),
//设置显示Marker的地图
map: map
});
}
根据经纬度,返回地址
//https://lbs.qq.com/javascript_v2/doc/geocoder.html
//地址和经纬度之间进行转换服务
var geocoder = new qq.maps.Geocoder();
//设置服务请求成功的回调函数
geocoder.setComplete(function(result) {
//console.log(result.detail);
});
//对指定经纬度进行解析
geocoder.getAddress(latLng);
h5方法获取手机当前地址
这是纯原生方法,但是在ios中获取位置时失败,原因为ios限制了必须访问https时,才能获取位置。
// 控制台-sensors-geolocation
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position){
var lat=position.coords.latitude;
var lng=position.coords.longitude;
console.log(position.coords)
}
h5 另一种方案
借助第三方文件,获取当前设备位置,用手机访问测试。
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
Geolocation(key, 项目名称)
var geolocation = new qq.maps.Geolocation("6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB", "myapp");
geolocation.getLocation(showPosition, ()=>{
console.log('获取位置失败,如果是PC,请设置模拟器,Sensors')
})//, showErr, options
function showPosition(position) {
//positionNum ++;
console.log(position)
console.log(JSON.stringify(position, null, 4))
};
ECharts
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<div id="main2" style={{width:'100%',height:400}}></div>
//https://www.echartsjs.com/tutorial.html
// 基于准备好的dom,初始化echarts实例
var echarts = window.echarts;
var myChart = echarts.init(document.getElementById('main2'));
//https://www.echartsjs.com/option.html#tooltip
// 指定图表的配置项和数据
var option = {
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//https://www.echartsjs.com/examples/