Web各大地图开发

最新推荐文章于 2024-05-05 07:41:03 发布

胡安民

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量5k

点赞数 25

分类专栏：所有文章文章标签： html javascript html5 可视化 vue

本文链接：https://blog.csdn.net/weixin_45203607/article/details/120252085

版权

所有文章专栏收录该内容

620 篇文章 8 订阅

订阅专栏

Web各大地图开发

介绍

想必大家对地图都不陌生,都使用过地图吧,有了地图我们也就不用在把回家的路径牢牢地记住了,只需要在地图上搜索下就能进行导航了,

而且在打车的时候也都使用的是地图,…地图作用范围很广很广这里就不在多介绍了直接进入主题.

目前市面上主流的地图有:

高德地图

https://lbs.amap.com/ 开发者平台
百度地图

https://lbsyun.baidu.com/ 开发者平台
腾讯地图

https://lbs.qq.com/ 开发者平台
天地图

https://www.tianditu.gov.cn/ 开发者平台

以上就是我们常用的地图,也是可以免费调用的地图不收费,但是有次数限制都够用,基本所有的地图开发都要先申请为开发者后才能进行地图的开发

虽然高德很火很厉害,但是我公司让我用天地图开发,所以下面的案例大致演示天地图的开发的流程,其他平台的地图开发流程基本都类似.

只要掌握一个地图的开发那么其他地图开发就是小儿科了…

开发地图需要的准备

进入天地图页面
注册账号
申请成为开发者

开发者分为: 个人开发者和企业开发者根据情况自行选择
然后根据需求创建应用-生成应用key

入门Dome

实例代码:

http://lbs.tianditu.gov.cn/api/js4.0/guide.html 以下代码的内容介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
            //39.897019,116.323003
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:100%; height:900px"></div>
</body>
</html>

地图级别也就是地图加载后显示的缩放级别

缩放级别1~2 那么就是洲级别 (亚洲 ,美洲…)

缩放级别3~4 那么就是国家级别

缩放级别5~6 那么就是省级别

缩放级别7~8 那么就是市级别

缩放级别9~10 那么就是区级别

缩放级别11~12 那么就是县级别

…以此类推最多缩放18级别(街道级别)

上案例效果图:

各种需求进行开发

页面

http://lbs.tianditu.gov.cn/api/js4.0/examples.html 基本日常所需的实例,稍微改动就能使用了

上面实例无法满足你的要求或者需要添加特殊操作,那么能在下面AOI文档中能找到具体实例代码里的每一个方法使用详细,然后在根据业务需求进行修改就行了

http://lbs.tianditu.gov.cn/api/js4.0/class.html

接口服务

在天地图中提供了几个服务接口用来获取一些数据的地方 ,但是注意有每日调用配额限制的(控制台可以查看次数限制)

http://lbs.tianditu.gov.cn/server/search.html

比如:客户想查询或者快速定位某一个区域或者街道的位置,但是自己通过地图一点一点的找太麻烦了那么就可以通过接口的方式直接获取到想要的数据,

查询: 北京市延庆区延庆镇莲花池村前街50夕阳红养老院的坐标

http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"北京市延庆区延庆镇莲花池村前街50夕阳红养老院"}&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5

接口返回的数据:

{“msg”:“ok”,“location”:{“score”:40,“level”:“地名地址”,“lon”:116.002677524,“lat”:40.4509903540001,“keyWord”:“北京市延庆区延庆镇莲花池村前街50夕阳红养老院”},“searchVersion”:“6.0.0”,“status”:“0”}

响应接口

参数值	参数说明	参数类型	备注（值域）
status	返回状态	string	0：正常返回，101：结果为空，404：出错。
msg	返回信息	string	OK：正常，其他异常。
location	地址信息	json	地址信息

location

参数值	参数说明	参数类型	备注（值域）
lon	坐标点显示经度	Double	必须返回。
lat	坐标点显示纬度	Double	必须返回。
level	类别名称	string	非必须返回。
typeRound	附近相似点	Array	开启周边查询必需返回。

然后在代码里通过

 map.centerAndZoom(new T.LngLat(116.41593, 39.92313), 16);

从新设置下地图显示的位置,以及缩放比例就行了.

标注案例

在很多项目都要求把客户提供的公司…在地图上标注出来并且显示对应的描述,

在天地图提供的实例中是默认鼠标点击显示,然后点击消失,实际中这样太麻烦了我们稍作修改,改变为鼠标悬浮显示,鼠标离开消失

修改后的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>天地图－地图API－范例－多个点的信息窗口</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #mapDiv{height:900px;width:100%;}
        input,p { margin-top: 10px; margin-left: 5px; font-size: 14px;  }
    </style>
    <script>
        var map
        var zoom = 15;
        function onLoad() {

            var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
                [116.406605,39.921585,"地址：北京市东城区东华门大街"],
                [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
            ];

            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.41593, 39.92313), zoom);

            for(var i=0;i<data_info.length;i++){
                var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverLay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }
            function addClickHandler(content,marker){
                // 改为鼠标悬浮显示
                marker.addEventListener("mouseover",function(e){
                    openInfo(content,e)}
                );
                //添加鼠标离开后关闭提示框
                marker.addEventListener("mouseout",function(e){
                        map.closeInfoWindow()
                }
                );
            }
            function openInfo(content,e){
                var point = e.lnglat;
                marker = new T.Marker(point);// 创建标注
                var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
                map.openInfoWindow(markerInfoWin,point); //开启信息窗口
            }
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>为多个点添加多个点的信息窗口</p>
</body>
</html>

如果客户不知道自己公司…的坐标,我们可以通过-客户给的名称,进行自动搜索地理位置然后进行标注实现

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－地理编码</title>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script>
    <script>
        var map;
        var zoom = 3;
        var geocoder;
        function onLoad()
        {
            //初始化地图对象
            map=new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969,39.89945),zoom)
            //创建对象
            geocoder = new T.Geocoder();
            //根据国家名称自动搜索,对应的坐标,然后插入标注
            var list=["美国","中国","阿拉伯联合酋长国"];
            for (let string of list) {
                geocoder.getPoint(string,searchResult);
            }


        }

        function searchResult(result){
            console.log("经纬度: "+result.location.lat + ',' + result.location.lon)
            if(result.getStatus() == 0){

                //创建标注对象
                var marker = new T.Marker(result.getLocationPoint());
                //向地图上添加标注
                map.addOverLay(marker);
                var markerInfoWin = new T.InfoWindow("信息窗口");
                marker.addEventListener("click", function () {
                    marker.openInfoWindow(markerInfoWin);
                });// 将标注添加到地图中

            }else{
                alert(result.getMsg());
            }

        }


    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何使用地理编码接口获得坐标信息。</p>
</body>
</html>

vue 引入天地图

index.html 中引入天地图在线 API

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-tdt-demo</title>
    <!-- 引入天地图在线 API -->
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

components 文件夹中新建 TdtMap.vue 组件

mounted() 中初始化天地图

<template>
  <div :id="tdtMapDivID" class="divTdtMap"></div>
</template>

<script>
  export default {
    name: 'TdtMap',
    data() {
      return {
        tdtMapDivID: "tdtMapDivID_"+this._uid,
        tdtMap: {}
      }
    },
    created() {
    },
    mounted(){
      // 初始化天地图
      this.initTdtMap()
    },
    watch: {
    },
    methods: {
      // 初始化天地图
      initTdtMap(){
        this.tdtMap = new T.Map(this.tdtMapDivID)
        this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
      },
    }
  }
</script>

<style scoped>
  .divTdtMap {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 80vh;
    z-index: 0;
  }
</style>

测试组件，新建 test.vue

导入组件、注册组件和使用组件

<template>
  <!-- 使用组件 -->
  <TdtMap></TdtMap>
</template>

<script>
  /* 导入组件 */
  import TdtMap from './components/TdtMap'
  
  export default {
    name: 'TdtMap',
    components: {
      /* 注册组件 */
      TdtMap,
    },
    data() {
      return {
      }
    },
    created() {
    },
    mounted(){
    },
    watch: {
    },
    methods: {
    },
  }
</script>

<style scoped>

</style>

隐藏天地图LOGO

 document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none'

点赞 -收藏加 -关注便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复感谢,配合,希望我的努力对你有帮助^_^

胡安民

关注

25
点赞
踩
135

收藏

觉得还不错? 一键收藏
打赏
17
评论
Web各大地图开发

各大地图开发介绍想必大家对地图都不陌生,都使用过地图吧,有了地图我们也就不用在把回家的路径牢牢地记住了,只需要在地图上搜索下就能进行导航了,而且在打车的时候也都使用的是地图,…地图作用范围很广很广这里就不在多介绍了直接进入主题.目前市面上主流的地图有:高德地图https://lbs.amap.com/ 开发者平台百度地图https://lbsyun.baidu.com/ 开发者平台腾讯地图https://lbs.qq.com/ 开发者平台天地图https://
复制链接

扫一扫