map地图

简介: map地图

地图想必大家都很熟悉,地图的应用非常广泛,我们出远门通常都会用到,下面我来给大家讲解一下地图!

首先我们要知道该怎样下载地图?

1.地图的版本有很多,我们选择一款,前往地图开发者中心。

2.注册,每个地图都需要注册个人信息的。

3.点击控制台,找到我的应用,创建应用并添加key值。

如何引用地图?

1.在HTML中定义一个容器,通过css来调整容器大小(这个容器是用来存放地图的)。

2.引用API库,将地图路径引过来。

3.填充地图显示代码,也可以给地图绑定点击事件,实现一些操作。

 <script>
 
        //地图初始化函数,本例取名为init,开发者可根据实际情况定义
 
        function initMap() {
 
            //定义地图中心点坐标
 
            var center = new TMap.LatLng(39.984120, 116.307484)
 
            //定义map变量,调用 TMap.Map() 构造函数创建地图
 
            var map = new TMap.Map(document.getElementById('container'), {
 
                center: center,//设置地图中心点坐标
 
                zoom: 17.2, //设置地图缩放级别
 
                pitch: 43.5, //设置俯仰角
 
                rotation: 45 //设置地图旋转角度
 
            });
 
        }
 
    </script>

下面是一个地图典型事件;(获取当前地图点击点坐标)


注意:这个点击事件是绑定给整个地图map的,(不管点击地图哪个位置,都会触发此事件,地图所用到的事件大多都是绑定给整个地图map的),分别声明两个变量名让其代表经度与纬度,使用事件监听的方式获取到经度与纬度,最后将其输出到事先设置好的信息框中。我们可以使用定位把它固定到任何地方。


相关文章
|
9月前
|
定位技术
97Echarts - 地理坐标/地图(Draw Polygon on Map)
97Echarts - 地理坐标/地图(Draw Polygon on Map)
33 0
|
9月前
|
定位技术
95Echarts - 地理坐标/地图(Binning on Map)
95Echarts - 地理坐标/地图(Binning on Map)
23 0
|
6天前
|
定位技术
vue-baidu-map 自定义地图主题
vue-baidu-map 自定义地图主题
14 0
|
2月前
|
移动开发 定位技术
uniapp组件map地图组件使用
uniapp组件map地图组件使用
178 0
|
12月前
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
203 1
|
2月前
|
定位技术 Python
Python的pyecharts安装,导入map、geo模块,画地图
Python的pyecharts安装,导入map、geo模块,画地图
131 1
|
12月前
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
375 0
|
2月前
|
定位技术 Python
pyecharts从入门到精通-地图专题Map-带时间轴与网格的复杂绘图
pyecharts从入门到精通-地图专题Map-带时间轴与网格的复杂绘图
|
2月前
|
小程序 JavaScript 定位技术
微信小程序地图控件Map的使用
微信小程序地图控件Map的使用
129 0
|
9月前
|
定位技术
100Echarts - 地理坐标/地图(Air Quality - Baidu Map)
100Echarts - 地理坐标/地图(Air Quality - Baidu Map)
44 0