html5获取当前位置的api腾讯地图,腾讯地图JavaScript API调用
腾讯地图JavaScript API调用
1、加载地图 API
页面直接引入
https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 网址是API文件的位置,v2.0 指当前使用的API的版本标识,key=[申请的开发密钥]
2、创建一个容纳地图的div容器
要使地图在网页上显示,必须为其在网页中创建一个容器。通常,我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。
在上述示例中,我们定义名为 "container" 的 div,并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸。
3、地图基本对象
var map = new qq.maps.Map(document.getElementById('container'),myoptions);
表示地图的 JavaScript 类是 Map 类。此类的对象在页面上定义单个地图。我们使用 JavaScript new 操作符创建此类的一个新实例。当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是 div 元素)作为地图的容器。HTML 节点是 JavaScript document 对象的子节点,我们通过document.getElementById() 方法获取对此元素的引用。此代码定义一个全局变量(名为map),并将该变量分配给新的 Map 对象。函数 Map() 称为构造函数,其定义请参考《参考手册》
myoptions 是地图的配置对象。
4、初始化地图
map.panTo(new qq.maps.LatLng(39.916527,116.397128));
通过 Map 构造函数创建地图之后,还需要执行一个操作,即将其初始化。初始化通过地图的 panTo() 方法完成。panTo() 方法需要LatLng 经纬度坐标,并且调用此方法必须在对地图执行任何其它操作(包括设置地图本身的任何其它属性)之前。
LatLng 是 latitude 经度 Longitude 纬度 缩写
5、加载地图
当 HTML 页面显示时,文档对象模型 (DOM) 即会扩展,接收其他外部图像和脚本并将其合并到 document 对象中。为了确保只有在完全加载页面后才将我们的地图放在页面上,我们仅在 HTML 页面的 元素收到 onload 事件后才执行构造 Map 的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。body 标签的 onload 属性是事件处理程序的一个示例。腾讯 Maps Javascript API 还提供了一组事件,可供您进行处理以确定状态变化。有关详细信息,请参阅地图事件部分。
参考案例1:
简单地图
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;
}
//初始化地图函数 自定义函数名init
functioninit() {//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center:new qq.maps.LatLng(39.916527,116.397128), //地图的中心地理坐标。latitude 经度 Longitude 纬度
zoom:8 //设置缩放级别
});
}//调用初始化函数地图,可以写在body中
//init();
/** function init() {
var myLatlng = new qq.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}
**/}
View Code
地图事件
腾讯地图API具有事件接口,用户可以根据各自不同的需求添加不同的事件扩展。
目前腾讯地图提供的事件类型有两类:
用户事件(如“点击地图”鼠标事件)是从 DOM 传播到 腾讯 Maps API 中的。这些事件是独立的,并且与标准 DOM 事件不同。包括:单击事件(click)、双击事件(dblclick)、鼠标滑过事件(mouseover)、鼠标移动(mousemove)等;
腾讯地图API特有的事件,MVC 状态更改通知反映了腾讯Maps API 对象中的更改,并以 property_changed 惯例命名。如:缩放级别更改事件(zoom_changed)、内容更改事件(content_changed)等。
1、添加地图点击事件
var listener =qq.maps.event.addListener(
map,'click',function() {
alert('您点击了地图。');
}
);
使用qq.maps.event.addListener() 可以将事件绑定到某一个对象上,返回一个监听者对象。方法第一个参数为被绑定事件的对象,第二个参数为事件类型,第三个参数为事件的处理方法。
2、事件中获取参数
addListener() 在事件被触发时会将 DOM 事件对象传入事件的处理方法,并在事件对象中添加鼠标当前位置的地理坐标属性 LatLng。
qq.maps.event.addListener(
map,'click',function(event) {
console.log('经度',event.latLng.lat,' 纬度:',event.latLng.lng);
}
);
3、移除事件
var listener =qq.maps.event.addListener(
map,'click',function() {
alert('您点击了地图。');
}
);//移除 click 事件.
qq.maps.event.removeListener(listener);
地图控件
腾讯地图API控件是用户与地图交互的 UI 元素。API提供多样的控件便于用户直接使用,并提供自定义控件 Control,最大限度满足用户需求。
目前腾讯地图API中提供的控件有:
导航控件
比例尺控件
自定义控件等
1、向地图添加控件
在地图上添加一个比例尺控件,并将控件放置在地图的左下角,可在代码中添加如下内容:
添加比例尺控件
map = newqq.maps.Map(
document.getElementById("container"),
{
center:new qq.maps.LatLng(39.914850, 116.403765),
zoom:13}
);var scaleControl = newqq.maps.ScaleControl({
align: qq.maps.ALIGN.BOTTOM_LEFT,
margin: qq.maps.Size(85, 15),
map: map
});
地图覆盖物
覆盖物是指覆盖到地图上面的所有事物。覆盖物都有自己的地理属性,通过设置地理属性来控制覆盖物在地图中的显示位置。
腾讯地图API中的主要包括的覆盖物有:
标注
折线
多边形
圆形
信息窗口等
html5获取当前位置的api腾讯地图,腾讯地图JavaScript API调用相关推荐
- 百度地图的两套JavaScript API
前言 百度地图的有套JavaScript API:JavaScript API 和 JavaScript API GL. JavaScript API v2.0 版本 开发文档: http://lbs ...
- 关于小程序移动端调用微信API及腾讯地图实例,获取当前位置、逆地址解析、路线规划、地图展示
前言:记录使用腾讯地图定位的逻辑思路讲解 以下内容会分为三部分讲解: 小程序调用微信API获取经纬度 小程序调用腾讯地图API地址转坐标解析 小程序调用腾讯地图API获取目的地交通线路 移动端H5调用 ...
- 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】
是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...
- html5经纬度 ios,根据HTML5 获取当前位置的经纬度
是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. 点击这个按钮 ...
- HTML5页面调用百度地图API,获取当前位置并导航到目的地
微信也可用, <!DOCTYPE html> <html lang="zh-cmn-Hans"><meta charset="UTF-8&q ...
- 腾讯地图api_腾讯位置服务JavaScript API GL正式版发布 免费向开发者开放
近日,腾讯位置服务推出JavaScript API GL正式版,并免费向开发者开放.JavaScript API GL是新一代基于WebGL实现的高性能三维渲染引擎而封装的一套3D版本地图API,是腾 ...
- html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...
- 微信小程序获取当前位置和城市名
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 目录 一.授权并获取经纬度 腾讯地图API **简介** Hello world! 一. ...
- 微信上的网站 用HTML5获取地理位置
今天折腾了一天,因为项目的需要,需要在微信网站上得到当前的地理位置.采用的是HTML5开发,但是实验了很多种方法,都不行.HTML5获取地理位置信息,是通过ip获取,ip的位置和你本人的位置差距还是很 ...
最新文章
- express中放置静态文件
- SQL基础选段(2)
- jQuery如何选择表格每行中的第三列?
- input 中的autoComplete属性
- mysql 逻辑备份 物理备份_数据库的逻辑备份和物理备份--非RMAN
- php生成图片水印,PHP生成图片加文字及图案水印办法
- 下一代面向知识的 BI 到底有何不同,从 nextionBI 数据解读能力中一探究竟
- [Erlang危机](5.1.0)VM检测概述
- 腾讯视频QLV格式转换为MP4格式
- Windows7电脑启动时提示文件winload.exe无法验证其数字签名,错误代码0xc0000428的解决方法
- 4874: 筐子放球
- Mac 使用音频工具分析音频数据
- uniapp对接微信公众号H5微信支付、分享、小程序隐藏右上角分享胶囊
- 解决DELL台式机两用音频接口不能识别耳麦的问题
- Injected script—web 自动化测试技术原理解析,以TestCafe为例
- ResNet详解与分析
- WAP中的ASP技术
- 2017年华为实习面试心得
- 论文写作课程内容总结
- postman文档参数化
热门文章
- 2009太平洋电脑网年度评测 数码单反横评
- 让AI帮你玩游戏(一) 基于目标检测用几个样本帮你实现在魔兽世界中钓鱼(群已满)
- Kaggle与机器学习流程
- Kafka+zookeeper集群搭建
- #Paper Reading# Why Should I Trust You? Explaining the Predictions of Any Classifier
- 这里是一个有关KiTTY本地化程序 cnKiTTY的简单说明~~
- c++程序设计基础(第五版)(上) 习题与解答
- 程序君带你畅聊发送短信验证码
- 计算机三级网络技术(重点)
- android 心跳 简书,如何高效维持网络长连接:手把手教你实现 自适应的心跳保活机制...