yandex地图js学习

由于百度地图在国外的某些寻路的场景不太完善，所以试用了一下俄罗斯的开源地图。同google地图一样，规划路线需要申请apikey，但无需绑定信用卡，每天的免费调用次数也非常够用。

yandex maps开发文档

申请apikey

只需要创建账号，按指引申请就好了。
申请页面是俄文的，没关系，勾选下面这个选项然后点击下一步就好

JavaScript API и HTTP Геокодер

查看使用次数

https://developer.tech.yandex.ru/services/3

引入

由于yandex默认是[ 纬度，经度 ]，所以在引入时修改了默认方式，设置成我们熟悉的经纬度

<scriptsrc="https://api-maps.yandex.ru/2.1/?apikey=Your API key&lang=en_US&coordorder=longlat"type="text/javascript"></script>

初始化

ymaps.ready(function () {const yandexMap = new ymaps.Map(id, {center: [24.9042208, 14.3782747], // 苏丹zoom: 7,controls: ['zoomControl', 'fullscreenControl'],});});

如果仅仅是想更改地图中心点

yandexMap.setCenter([ 3.610998, 51.4987962 ], 7) // 南非

声明GeoObjectCollection

GeoObjectCollection可增加多个，用来操作不同类型的元素

const pCollection = new ymaps.GeoObjectCollection();
yandexMap.geoObjects.add(pCollection); // 将集合添加到map
// pCollection.removeAll(); // 移除集合中所有的元素

根据经纬度获取城市名称

假定经纬度为coords

const myReverseGeocoder = ymaps.geocode(coords, { kind: 'locality' });myReverseGeocoder.then(function (res) {console.log(res);const obj = res.geoObjects.get(0);const name = obj.properties.get('name'); // 地点名称const address = obj.properties.get('text'); // 详细地址},function (err) {// todo 提示获取失败console.log('地点获取失败 === ', err);});

显示气泡

pCollection.add(new ymaps.Placemark([ 3.610998, 51.4987962 ], {iconCaption: '这里是南非',}));

规划显示路线

如果自己添加路线，可显示多条不同出发地目的地的路线

const multiRoute = new ymaps.multiRouter.MultiRoute({referencePoints: [start, end], // 出发地和目的地经纬度或地址名称params: {routingMode: 'auto',},});pCollection.add(multiRoute);

在路线中获取后增加某些处理(不要擅自存储这些信息，这在免费的yandex中是不被允许的)

const multiRoute = new ymaps.multiRouter.MultiRoute({referencePoints: [startAddress, endAddress],params: {routingMode: 'auto',},});multiRoute.model.events.add('requestsuccess', function () {try {const activeRoute = multiRoute.getActiveRoute();const distance = activeRoute.properties.get('distance').text; // 距离const duration = activeRoute.properties.get('duration').text; // 时间const boundedBy = activeRoute.properties.get('boundedBy');// const activeRoutePaths = activeRoute.getPaths()// console.log(//   'activeRoutePaths: ',//   activeRoutePaths.properties.getAll()// )// activeRoutePaths.each(function (path) {//   console.log('path: ', path.properties)// })}} catch (e) {console.log(`${startAddress} To ${endAddress}的路线绘制失败 === `, e);}});

yandex地图js学习相关推荐

ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
WebGIS地图相关学习笔记
这里将记录学习gis地图相关内容的时候,如果碰到了不懂或不理解的知识点的时候,会记录在这里. 进阶问题 Web地图服务规范(WMS.WMTS.TMS)简析_surpassLiang的博客-CSDN博客 ...
QT5百度地图开发学习——qt调用JavaScript函数并传参
文章目录前言一.通信桥梁bridge 二.QT与JS相互通信(调用函数) 1.QT调用js函数前言在上文<QT5百度地图开发学习--控件提升展示地图>中,我们通过控件提升的方式在同 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
程序员的高速学习法——以JS学习为例，进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...