yandex地图js学习

news/2024/11/23 0:03:42/

由于百度地图在国外的某些寻路的场景不太完善，所以试用了一下俄罗斯的开源地图。同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);}});