Skip to content

Latest commit

 

History

History
117 lines (92 loc) · 2.96 KB

1.3README.md

File metadata and controls

117 lines (92 loc) · 2.96 KB

腾讯地图

@(笔记)[腾讯地图]@案例：https://github.com/lhywell/map/tree/master/example/example6

入门教程

官网

http://lbs.qq.com/

申请密钥

目前除调用街景接口必须使用Key之外，地图和服务接口都没有强制限制。申请腾讯地图密钥，申请请跳转链接

查看API

特点

  1. key免费使用，没有调用次数限制，key作为可选项，但是推荐用
  2. 腾讯地图API的地图缩放级别为 4-17
  3. 提供附加库，比如drawing,geometry,autocomplete,convertor
  4. 支持https服务
  5. 可以实现画圆、画线、画多边形等，还有计算两点间的距离，路径规划，poi搜索，周边搜索，地址解析，街景展示等

缺陷：

  1. 加载海量点没有
  2. 等时圈没有(提供出行时间，出行方式，给出一组地图上的点坐标)
  3. POI搜索支持圆形，矩形，不支持多边形
  4. 不能获取多边形的中心

POI分类目录

http://lbs.qq.com/webservice_v1/guide-appendix.html

示例

http://lbs.qq.com/javascript_v2/demo.html

构建一个地图

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>简单地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
    }
    * {
        margin: 0px;
        padding: 0px;
    }
    body,
    button,
    input,
    select,
    textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }
    p {
        width: 603px;
        padding-top: 3px;
        overflow: hidden;
    }
    .btn {
        width: 142px;
    }
    #container {
        min-width: 600px;
        min-height: 767px;
    }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script>
    window.onload = function() {

        //直接加载地图


        //初始化地图函数  自定义函数名init
        function init() {
            //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: new qq.maps.LatLng(39.916527, 116.397128), // 地图的中心地理坐标。
                zoom: 8 // 地图的中心地理坐标。
            });
        }

        //调用初始化函数地图
        init();


    }
    </script>
</head>

<body>
    <!--   定义地图显示容器   -->
    <div id="container"></div>
</body>

</html>

上一页：高德

下一页：立得空间