html5腾讯地图api应用

第一次写博客，之后的学习也会通过这种方式巩固。

最近在学JavaScript和HTML5，所以近期的内容皆是关于这些知识的。

1.HTML5支持地理定位，可以获取用户的经纬度信息。

在js中可以使用position.coords对象获取经纬度

window.onload = getMyLocation; //在网页dom加载完毕之后调用getmylocation方法
var map;

function getMyLocation(){
if(navigator.geolocation){ //navigator.geolocation是html5内置对象的属性，有值就代表浏览器支持地理定位
navigator.geolocation.getCurrentPosition(displayLocation,displayError);//getcurrentposition方法有三个参数，1个是获得定位信息成功后的函数（此处为displaylocation），1个是失败后调用的函数（此处为displayerror），1个是用来控制地理定位如何计算他的值的（此处省略，没有设置）
}else{
alert("oops,no geolocation support")
}
}

function displayLocation(position){ //获取定位信息成功后调用的函数
var latitude = position.coords.latitude; //position.coords对象中有latitude和longitude俩属性分别表示经纬度
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "latitude:"+latitude+"longtitude:"+longitude;//将经纬度显示在页面中
if(map == null){
showMap(position.coords);
}
}

在使用腾讯地图之前需要在腾讯地图官网申请key，方法参考官网

并在html页面中插入<script src="http://map.qq.com/api/js?v=2.exp&key=在官网申请的key值"></script>

function showMap(coords){ //将腾讯地图展示在页面中
var qqLatAndLong = new qq.maps.LatLng(coords.latitude,coords.longitude); //地图上显示的中心点
var mapOptions={ //新建地图时需要传入的参数，用来设置地图的
  zoom:10, //地图放大的级别
  center:qqLatAndLong,//地图显示中心的经纬度
  mapTypeId:qq.maps.MapTypeId.ROADMAP//地图种类，参考官网开发文档
};
var mapDiv = document.getElementById("map");//获取html中用来盛放地图的div容器
map = new qq.maps.Map(mapDiv,mapOptions);//创建地图

}

地图过大，可以在放地图的div中添加样式修改height和width的值，使地图显示的大小合适

这是读《head first html5 programming》学到的，有疑问可以回复交流

html5腾讯地图api应用相关推荐

html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
腾讯地图api如何根据地址获取经纬度
腾讯地图api如何根据地址获取经纬度 /** * 根据地址得到经纬度 //GET请求 */ @GetMapping("tencentGetLatLngBy/{a ...
html5 定位计算距离,HTML5 地理定位+地图 API：计算用户到商家的距离
背景最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图: 支付宝口碑商家页面截图思路分析 1.商家选取店铺地址,将坐标经纬度存入数据库: 2.移动端定位当前用 ...
详细地址访问腾讯地图API，转换为经纬度
1.首先引入腾讯地图API <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"& ...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能背景介绍公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能腾讯地图的官方文档.首先 ...
python 通过腾讯地图API获取全国关键词（楼盘/商场）位置信息
到腾讯地图API官网https://lbs.qq.com/index.html 申请一张账号,申请开发者密钥(Key):申请密钥. 以下为搜索全国万达的地理位置信息 #!coding=utf-8 im ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
利用腾讯地图API调用街景
1.首先搭建自己的web服务器(可以用IIS或Apache,或更轻量级的软件) 我这里使用了安可WEB服务器: 2.双击WEB服务器,设置网站路径.端口,点击启动(这里的IP是我在命令行输入ipcon ...

html5腾讯地图api应用

html5腾讯地图api应用相关推荐

最新文章

热门文章