入门使用-腾讯地图API

一．注册账号
高德开放平台官网：高德开放平台 | 高德地图API (amap.com)
登录（或注册自己的账号）》找到我的应用》创建一个应用（应用名称都可以简单一点就好，key名称也一样）==》添加

二．基础使用
高德地图js api：概述-地图 JS API v2.0 | 高德地图API (amap.com) （链接里也有使用的教程）
1.在index.html中引入秘钥key

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'你的秘钥',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.Driving"></script>

2.点标记示例

// 创建 AMap.Icon 实例：
var icon = new AMap.Icon({
size: new AMap.Size(40, 50), // 图标尺寸
image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png', // Icon的图像
imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
var marker = new AMap.Marker({
//经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
position: new AMap.LngLat(116.39, 39.9),
offset: new AMap.Pixel(-10, -10),
icon: icon, // 添加 Icon 实例
title: '北京',
zoom: 13
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);

3.路线规划示例

//基本地图加载
var map = new AMap.Map("container", {resizeEnable: true,center: [116.397428, 39.90923],//地图中心点zoom: 13 //地图显示的缩放级别
});
//构造路线导航类
var driving = new AMap.Driving({map: map,panel: "panel"
});
// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status === 'complete') {log.success('绘制驾车路线完成')} else {log.error('获取驾车数据失败：' + result)}
});

入门使用-腾讯地图API相关推荐

利用腾讯地图API调用街景
1.首先搭建自己的web服务器(可以用IIS或Apache,或更轻量级的软件) 我这里使用了安可WEB服务器: 2.双击WEB服务器,设置网站路径.端口,点击启动(这里的IP是我在命令行输入ipcon ...
腾讯地图api如何根据地址获取经纬度
腾讯地图api如何根据地址获取经纬度 /** * 根据地址得到经纬度 //GET请求 */ @GetMapping("tencentGetLatLngBy/{a ...
html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
详细地址访问腾讯地图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过程如 ...
前端web用腾讯地图api根据地址获取经纬度
需求:使用腾讯地图,通过输入的地址获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调 ...

入门使用-腾讯地图API

入门使用-腾讯地图API相关推荐

最新文章

热门文章