网站首页 » 前端开发 » JavaScript » 腾讯地图 API 使用指南
上一篇:
下一篇:

腾讯地图 API 使用指南

前言

地图功能对于我们的日常生活来说非常地重要,不管你去到哪里都需要地图为你保驾护航,这次整理了下调用腾讯地图 API 时的一些有用的东西,不为别的只为让看到的人节省点时间,时间无价,但我愿意把浪费了自己时间的一些东西分享出来,让“前人种树后人乘凉”的美好品质传承下去。

资料整理

在项目中如果我们是通过 requirejs 来管理 js 。那么你肯定会遇到这样的问题。

看这里
require.config({
    paths: {
       'qqmap': 'https://map.qq.com/api/js?v=2.exp',
    }
});

在JS中引用并开始添加地图JS 代码时:

看这里
define(['qqmap'], function(){
    ......
});

你看得到一个提示:

提示

Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

要想解决这个问题,你可先下载一个 async.js 文件,下载地址:https://github.com/millermedeiros/requirejs-plugins

async.js 里的代码里非常的简短:

源码
/** @license
 * RequireJS plugin for async dependency load like JSONP and Google Maps
 * Author: Miller Medeiros
 * Version: 0.1.2 (2014/02/24)
 * Released under the MIT license
 */
define(function(){

    var DEFAULT_PARAM_NAME = 'callback',
        _uid = 0;

    function injectScript(src){
        var s, t;
        s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = src;
        t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s,t);
    }

    function formatUrl(name, id){
        var paramRegex = /!(.+)/,
            url = name.replace(paramRegex, ''),
            param = (paramRegex.test(name))? name.replace(/.+!/, '') : DEFAULT_PARAM_NAME;
        url += (url.indexOf('?') < 0)? '?' : '&';
        return url + param +'='+ id;
    }

    function uid() {
        _uid += 1;
        return '__async_req_'+ _uid +'__';
    }

    return{
        load : function(name, req, onLoad, config){
            if(config.isBuild){
                onLoad(null); //avoid errors on the optimizer
            }else{
                var id = uid();
                //create a global variable that stores onLoad so callback
                //function can define new module after async load
                window[id] = onLoad;
                injectScript(formatUrl(req.toUrl(name), id));
            }
        }
    };
});

async.js 下载好后,需要像 require 进来:

看这里
require.config({
    paths: {
       'async': 'lib/require/async',
       'qqmap': 'https://map.qq.com/api/js?v=2.exp',
    }
});

然后在 JS 里这样使用它:

看这里
define(['async','async!qqmap'], function(){
    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();
    }
});

套路大概就这样。

SearchServiceOptions 对象规范

不要小看这个规范,看完之后可能你会就知道为什么你在搜索框中输入内容后,有些地点搜索不到。这是因为你少配置了两个东西。

配置项:

  • autoExtend ()  设置动扩大检索区域。默认值true,会自动检索指定城市以外区域。
  • latlngBounds.extend(poi.latLng); 扩展边界范围,用来包含搜索到的Poi点

介绍:http://lbs.qq.com/javascript_v2/doc/searchserviceoptions.html

示例:http://lbs.qq.com/javascript_v2/case-run.html#service-searchserviceoptions

不要再傻傻地跟找你麻烦的人(为什么搜索不到)说:做不到了。

qq.maps.MarkerImage 类

这个方法的作用就是自定义标注图标。

创建MarkerImage类的语法:

new qq.maps.MarkerImage(url, size, origin, anchor, scaleSize);

看完之后不要觉得自己已经知道怎么用了。有一个细节我们还是需要注意的。比如:我们换了标注图标后可能大小会跟默认的标注图标不一样,这时候我们就需要调整它的大小。

要用到两个属性:

  • size:(可选) 图标尺寸,该尺寸为显示图标的实际尺寸,不是整个图片的原始尺寸,当需要显示的是整个图片中一部分的时候必须设置该属性。
  • scaleSize:(可选) 缩放尺寸,用于拉伸或缩小原图片时使用,该尺寸是用来改变整个图片的尺寸。

值得注意的是这两个属性的设置必需先通过 new point 生成实例,类似下面这样:

生成实例
var size = new qq.maps.Size(36, 36);
var scaleSize = new qq.maps.Size(36, 36);

生成后再把这两个参数传给 qq.maps.MarkerImage 构造器

看这里
icon = new qq.maps.MarkerImage(
    "img/icon.png",
    size,
    origin,
    anchor,
    scaleSize
);

不然,就无法调整图片后的图片大小。

http 与 https

在使用腾讯地图时,你得注意下自己的服务器是不是用了https 协议,如果是,而你调用这个地图时是用 http 协议引入 .js 文件的话就会报错,不过如果你能看到它报错的话,估计你也能看明白是什么原因。不过有时候因为诸多原因,你看不到这个报错信息,那么如果在 app 里点不进去地图页面,有可能就是因为这个 https 在作怪。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/tencent-map-api/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END