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的),分别声明两个变量名让其代表经度与纬度,使用事件监听的方式获取到经度与纬度,最后将其输出到事先设置好的信息框中。我们可以使用定位把它固定到任何地方。


相关文章
|
7月前
|
定位技术
97Echarts - 地理坐标/地图(Draw Polygon on Map)
97Echarts - 地理坐标/地图(Draw Polygon on Map)
26 0
|
7月前
|
定位技术
95Echarts - 地理坐标/地图(Binning on Map)
95Echarts - 地理坐标/地图(Binning on Map)
18 0
|
5月前
|
小程序 定位技术
uniapp 地图组件(map)的使用总结
uniapp 地图组件(map)的使用总结
155 0
|
10月前
|
开发框架 JavaScript 定位技术
Uniapp - 地图map组件及使用
Uniapp - 地图map组件及使用
828 0
|
JavaScript 定位技术
echarts没有map地图解决方案
echarts没有map地图解决方案
184 0
echarts没有map地图解决方案
|
存储 定位技术
别误会,Map不只是地图
上集说到ES6中set方法,在ES6中除了增加set方法之外,还考虑到一种场景——`键值对的存储`,而`map`集合就是专门存储多个键值对(key value pair)的数据。
142 0
|
数据可视化 JavaScript 前端开发
地图可视化不只是pyecharts.map
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一。不可否认,pyecharts绘制的地图实现方便、图形美观而且支持交互,但在面对不同需求时,其实我们还有很多其他手段实现地图可视化。
297 0
地图可视化不只是pyecharts.map
|
Web App开发 JavaScript 前端开发
51 地图基本接口(三)
1. 51 map搜索接口说明      如果要搜索地图,则需要引入上面的js,该js可以进行地理位置搜索,如果 上海-上海马戏城   也可以进行周边查找      如果我们要显示搜索出来的地图,我们还需要添加引用如下js      2. 51map 查找单个结果      看如上效果图,上面的效果图是默认查找上海马戏城这个地理位置。
1082 0
|
Web App开发 JavaScript 前端开发
51 地图基本接口(二)
1. 51 map 地图接口   地图接口是我们用的非常多的一个接口,通常用于显示地图的地理位置和突出显示某个地理位置。当然这里只是一个普通的显示显示地图,我们还可以通过搜索来确定地理位置,这将在后面的文章中说明。
1128 0
|
定位技术
基于高德地图的描点操作,监听地图缩放,展示合理数量的marker
原文:基于高德地图的描点操作,监听地图缩放,展示合理数量的marker 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lx583274568/article/details/54089707 1.根据两点经纬度算两点之间的距离函数 function Rad(d){ return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
1763 0