mapboxgl 和高德api获取周边场所及交通信息

可狗可乐

已于 2023-08-07 15:01:47 修改

阅读量1.3k

点赞数 1

文章标签： javascript 前端 vue.js

于 2023-04-20 17:59:49 首次发布

本文链接：https://blog.csdn.net/weixin_43773218/article/details/130271485

版权

mapboxgl 配合高德地图api搜索周围的交通（公交、地铁）及教育医疗等场所信息

实现效果：

此处还有高德地图坐标偏移问题待解决

步骤：

先npm安装并引入mapboxgl

import mapboxgl from "mapbox-gl"

先找一个容器展示地图，且容器得先写好宽高

<div id="map"></div>

#map {
    width: 100%;
    height: 400px;
}

在拿到项目(即图中红色标记)坐标数据后，初始化地图

这里需要先去mapbox申请一个token

initmap(){
        let that = this
        mapboxgl.accessToken = "xxxxxxx这里是你的token"; //这里请换成自己的token
        var map = (this.map =  new mapboxgl.Map({
        container: 'map', // container id 绑定的组件的id
        style: 'mapbox://styles/mapbox/streets-v11', //地图样式，可以使用官网预定义的样式,也可以自定义
        center: [this.detailsForm.longitude,this.detailsForm.latitude], // 初始坐标系，这个是南京建邺附近
        zoom: 15,     // starting zoom 地图初始的拉伸比例
        pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: -17.6, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
        antialias: true, //抗锯齿，通过false关闭提升性能
        })) 
        // let lnglat = gcj02towgs84(this.detailsForm.longitude,this.detailsForm.latitude)
        
        new mapboxgl.Marker({color:'red'})
                    .setLngLat([this.detailsForm.longitude,this.detailsForm.latitude])
                    .addTo(map);
        let language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });//设置汉语
        map.addControl(language);
        map.on('load', function() {
                var geojson = {
                'type': 'FeatureCollection',
                'features': []
                };
                map.addSource('points', {
                type: 'geojson',
                data: geojson
                });
                map.addLayer({
                id: 'points',
                type: 'circle',
                source: 'points',
                'paint': {
                'circle-color': [
                    'match',
                    ['get', 'type'],
                    '起', '#62b500',
                    '#f54336' // 无匹配值
                ],
                'circle-radius': 13
                }
                });
                map.addLayer({
                'id': 'label',
                'type': 'symbol',
                'source': 'points',
                'layout': {
                'text-field': ['get', 'type'],
                "text-size": 12
                },
                paint: {
                'text-color': '#ffffff'
                }
                })
                })
                map.on('click', function(e) {  
                    var lngLat = e.lngLat;
                    console.log("isdraw",e.lngLat);
                });
       
   },

在初始化代码里，是Marker标记项目地址

new mapboxgl.Marker({color:'red'})
                    .setLngLat([this.detailsForm.longitude,this.detailsForm.latitude])
                    .addTo(map);

marker({color:'red')可以对标记的样式进行处理

接下来就是重点的了，使用高德地图的搜索周边api

第一步先去高德地图开发平台申请一个web服务key

进入开发平台按要求填写创建一个新应用，选择web服务，然后就能得到一个key

第二步就是发请求

getAround() {
        let that = this
        that.isDraw = false;
        let location = [Number(that.detailsForm.longitude).toFixed(6),Number(that.detailsForm.latitude).toFixed(6)].join(',')
        const url = 'https://restapi.amap.com/v3/place/around?key=这里换成你申请的key&location='+location+'&keywords=&types='
        +that.typeCode+'&radius=1000&offset=20&page=1&extensions=all';
        axios.get(url).then(res=>{
            that.aroundData = []
            for(let index = 0;index<res.data.pois.length;index++){
                that.aroundData.push({'name':res.data.pois[index].name,
                                      'address':res.data.pois[index].address, 
                                      'distance':res.data.pois[index].distance,
                                      'location':res.data.pois[index].location,
                                     })
            }
            for(let index = 0 ;index<that.aroundData.length;index++){
                let lngData = that.aroundData[index].location.split(',')
                let className = ''
                if(this.activeBtn == '交通'){
                    if(this.typeChecked == '地铁'){
                        className = 'measure-subway'
                    }else{
                        className = 'measure-bus'
                    }
                }else if(this.activeBtn == '教育'){
                    className = 'measure-school'
                }else if(this.activeBtn == '医疗'){
                    className = 'measure-hosipitol'
                }else if(this.activeBtn == '购物'){
                    className = 'measure-shop'
                }else if(this.activeBtn == '生活'){
                    className = 'measure-life'
                }else if(this.activeBtn == '娱乐'){
                    className = 'measure-play'
                }
                const ele = document.createElement("div")
                ele.setAttribute("class", className)
                const oneMarker =   new mapboxgl.Marker(ele)
                    .setLngLat([lngData[0],lngData[1]])
                    .addTo(that.map);
                this.markerList.push(oneMarker);
            }
            })
    },

对于请求参数的内容可以去看官网 https://lbs.amap.com/api/webservice/guide/api/search#around

这里边有详细介绍

然后这里附上 types的分类代码合集分类代码合集点此

在拿到周边信息数据后，就是在地图上标记啦

const ele = document.createElement("div")
ele.setAttribute("class", className)
const oneMarker =   new mapboxgl.Marker(ele)
                    .setLngLat([lngData[0],lngData[1]])
                    .addTo(that.map);
 this.markerList.push(oneMarker);

这里需要用一个数组markerList来存放所有标记，因为等下切换场所的时候需要把所有标记清除，然后根据选的不同场所，用不同的className来用不同的图标展示，这里示例一个学校的

::v-deep .measure-school{
    width: 50px;
    height: 50px;
    background-image:url(~@/assets/images/地图icon-04.png) ;
    background-size: contain
}

最后就是切换的时候，把所有场所标记先清除，这部分代码就是放到你切换场所的方法里，然后再调用getaround方法重新获取场所数据再重新标记

typeChange(value){
        if (this.markerList!== null) {
            for (var i = this.markerList.length - 1; i >= 0; i--) {
                this.markerList[i].remove();
            }
        }
        if(value == '交通'){
            value = '地铁'
            this.typeChecked = '地铁'
        }
        if(value!='公交'&&value!='地铁' ){
            for(const item of this.typesOption){
            if(item.name == value){
                this.typeCode = item.typesCode
            }
        }
        }else{
            for(const item of this.typesOption){
            if(item.name == value){
                this.typeCode = item.typesCode
            }
        }
        }
        this.getAround()
    },

差不多就是这样了，然后因为高德的坐标偏移，还需要去解决坐标转换问题

更新：

坐标转换问题已解决-> 坐标系转换

另外高德的查询周边信息接口是有限制免费次数的，目前是每日免费查100次，不够用的话就只能去提升配额了