百度地图接口实现添加坐标点和路线

最新推荐文章于 2024-02-29 12:00:28 发布
最新推荐文章于 2024-02-29 12:00:28 发布
阅读量2k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35254085/article/details/116717645
版权

之前在工作中实现了一个小的功能模块是调用百度地图的接口，实现初始化位置点和路线以及自己添加位置点和路线的功能，现在记录一下，方便自己以后来回顾知识。 此demo主要实现了以下功能：

  1. 在地图上添加位置点，并添加位置点的名称备注，右键停止添加位置点，添加点之后在左侧有一个位置点的列表，当点击列表中的点时，地图会将中心点移动到该点，并在点上显示标签为该位置点的名称备注。
  2. 在地图上可以添加一条路线，完成路线时右键停止，然后点击保存路线会弹出该线上所有折点的位置点所构成的字符串，点击编辑路线，路线就开启编辑功能，可以修改路线。

下面是添加点的效果图

 

添加路线时的效果图

 

以下是JS部分源码

var map;
var myVue;
var addpoint = false;  //添加点的判断
var addline = false;  //添加线的判断
$(function () {
    initMap();
    myVue = new Vue({
        el:'#app',
        data:{
            action:'',
            points:[],      // 点的集合
            linepoints:[],  //路线上的点的集合
            mouseMarker:'',  //跟随鼠标移动的marker点
            mouseMarkerTitle:'',  //鼠标移动时显示的label
            lines:[],       //线的集合
            mouseLine:{} ,   //跟随鼠标移动时的虚拟线
            initLine:null,    //初始化时的线
            myIcon: '',
            tmpLabel:'',
            editLine:'',     //可编辑的路线
            dialogVisible:false,   //控制信息框的显示与隐藏
            lineInfo:'',          //路线上的折点组成的字符串  lng,lat；lng,lat...
        },
        methods:{
            //菜单项位置点点击事件
            pointClick:function () {
                this.clear();
                this.action = "point";
                map.disableDoubleClickZoom();
                map.addEventListener('rightclick',myVue.clear);
                map.addEventListener('mousemove',myVue.mouseMove);
                map.addEventListener('click',myVue.addpoint);
            },
            //菜单项线点击事件
            lineClick:function () {
                myVue.clear();
                this.action = "line";
                map.addEventListener('click',this.addLine)
                map.addEventListener('rightclick',myVue.clear);
                map.addEventListener('mousemove',myVue.mouseMove);
            },
            save:function () {
                if (this.editLine!=""){
                    this.editLine.disableEditing();
                    this.linepoints = this.editLine.getPath();
                }
               const {linepoints} = this;
               this.lineInfo = "";
               for(let i=0;i<linepoints.length;i++){
                   this.lineInfo += linepoints[i].lat+','+linepoints[i].lng+';';
               }
                this.dialogVisible = true;
                //console.log(this.linepoints);
            },
            lineEditClick:function () {
                const lines = this.lines;
                for (let i=0;i<lines.length;i++){
                    map.removeOverlay(lines[i]);
                }
                this.lines = [];
                const editline = new BMap.Polyline(myVue.linepoints,{strokeColor: '#00F0f0',strokeWeight:5,strokrOpacity:1});
                map.addOverlay(editline);
                this.editLine = editline;
                editline.enableEditing();
            },
            lineDelClick:function () {
                const lines = this.lines;
                for (let i=0;i<lines.length;i++){
                    map.removeOverlay(lines[i]);
                }
                this.lines = [];
                this.linepoints = [];
            },
            clear:function () {
                map.removeEventListener('mousemove',myVue.mouseMove);
                map.removeEventListener('click',myVue.addpoint);
                map.removeEventListener('click',myVue.addLine);
                map.removeEventListener('rightclick',myVue.clear);
                map.removeOverlay(myVue.mouseMarker);
                this.action = "";
                this.mouseMarker = '';
                if (this.mouseLine!=""){
                    map.removeOverlay(this.mouseLine);
                    this.mouseLine = "";
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            mouseMove:function (e) {
                //console.log(1);
                if (this.action=='point'){
                    myVue.showMousePoint(e);
                }else if(this.action=='line'){
                    myVue.showMouseLine(e);
                }
            },
            addpoint:function (e) {
                if (this.action=='point'){
                    this.$prompt('请输入位置点名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        var marker = new BMap.Marker(e.point,{icon:this.myIcon});
                        map.addOverlay(marker);
                        marker.name = value;
                        myVue.points.push(marker);
                        this.$message({
                            type: 'success',
                            message: '位置点: ' + value+'添加成功',
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '位置点添加失败'
                        });
                    });
                }
            },
            addLine:function (e) {
                if(this.action=='line'){
                    if (this.linepoints.length>0){
                        const line = new BMap.Polyline([this.linepoints[this.linepoints.length-1],e.point],{strokeColor: '#00F0f0',strokeWeight:5,strokrOpacity:1});
                        map.addOverlay(line);
                        this.lines.push(line);
                    }
                    this.linepoints.push(e.point)
                }
            },
            showMouseLine:function (e) {
                if (this.mouseMarker==""){
                    const mouseMarker = new BMap.Marker(e.point,{icon:this.myIcon});
                    map.addOverlay(mouseMarker);
                    this.mouseMarker = mouseMarker;
                }else {
                    this.mouseMarker.setPosition(e.point);
                }
                if (this.linepoints.length>0){
                    const mouseline = new BMap.Polyline([this.linepoints[this.linepoints.length-1],e.point],{strokeColor: '#00F5A9',strokeWeight:5,strokrOpacity:0.3});
                    map.addOverlay(mouseline);
                    map.removeOverlay(this.mouseLine);
                    this.mouseLine = mouseline;
                }
            },
            showMousePoint:function (e) {
                if (this.mouseMarker==""){
                    this.mouseMarker = new BMap.Marker(e.point,{icon:this.myIcon});
                    map.addOverlay(this.mouseMarker);
                }
                this.mouseMarker.setPosition(e.point);
            },
            toCenter:function (i) {
               if (myVue.tmpLabel!=''){
                   map.removeOverlay(myVue.tmpLabel);
                   myVue.tmpLabel = '';
               }
                map.panTo(myVue.points[i].point);
                var str = " <div class='point_label'> "+myVue.points[i].name+"</div>";
                const label = new BMap.Label(str,{position:myVue.points[i].point});
                myVue.tmpLabel = label;
                map.addOverlay(label);
            }
        },
        mounted:function () {
            var myIcon = new BMap.Icon("imgs/point.png", new BMap.Size(40, 50))
                myIcon.setImageSize(new BMap.Size(40,50));
            this.myIcon = myIcon;
            this.points = initPoints();
        }
    })
})
function initPoints(){
    var myIcon = new BMap.Icon("imgs/point.png", new BMap.Size(40, 50))
    myIcon.setImageSize(new BMap.Size(40,50));
    var marker = [];
    marker[0] = new BMap.Marker(new BMap.Point(118.082868,36.829153),{icon:myIcon});
    marker[0].name = "东方实验学校";
    marker[1] = new BMap.Marker(new BMap.Point(118.075933,36.830077),{icon:myIcon});
    marker[1].name = "东方星城";
    marker[2] = new BMap.Marker(new BMap.Point(118.067365,36.834728),{icon:myIcon});
    marker[2].name = "温馨家园";
    marker[3] = new BMap.Marker(new BMap.Point(118.070112,36.83906),{icon:myIcon});
    marker[3].name = "魏家庄";
    marker[4] = new BMap.Marker(new BMap.Point(118.0575,36.829644),{icon:myIcon});
    marker[4].name = "流泉新村";
    marker[5] = new BMap.Marker(new BMap.Point(118.0564458,36.838945),{icon:myIcon});
    marker[5].name = "中房翡翠园";
    marker[6] = new BMap.Marker(new BMap.Point(118.055272,36.833977),{icon:myIcon});
    marker[6].name = "柳泉中学";
    marker[7] = new BMap.Marker(new BMap.Point(118.042174,36.834829),{icon:myIcon});
    marker[7].name = "金丽大厦";
    marker[8] = new BMap.Marker(new BMap.Point(118.047978,36.830424),{icon:myIcon});
    marker[8].name = "淄博市公安局";
    for (let i=0;i<marker.length;i++){
        map.addOverlay(marker[i]);
    }
    return marker;
}
function initMap() {
    map = new BMap.Map('map');
    var center = new BMap.Point(118.065728,36.818262);
    map.centerAndZoom(center, 15);
    map.enableScrollWheelZoom();
}

拓展：高德地图接口api

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7"></script>
    <!--  异步版本 ui组件, 用于添加城市信息 -->
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <!-- <script src="//webapi.amap.com/ui/1.0/main-async.js"></script> -->
    <!-- 移动端开发时, 添加以下内容 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
</head>
<style>
    #container {
        width: 600px;
        height: 480px;
        display: inline-block;
    }
    #container1 {
        width: 600px;
        height: 480px;
    }
    #right{
        float: left;
        margin-top: 40px;
    }
</style>
 
<body>
    <!-- 先在开发者页面创建应用,申请key, 然后使用 -->
    <!-- 高德教程地址  https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins -->
 
    <!-- 选择城市教程
        https://lbs.amap.com/api/webservice/guide/api/district -->
    <div id="container"> </div>
    <div id='right'>
        <div>
            <div class='title'>选择模式</div>
            <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
            <!-- </br> -->
            <input type='radio' name='mode' value='dragMarker' checked>拖拽图标模式</input>
        </div>
        <div>
            <button id='start'>开始选点</button>
            <button id='stop'>关闭选点</button>
        </div>
        <div>
            <div class='title'>选址结果</div>
            <div class='c'>经纬度:</div>
            <div id='lnglat'></div>
            <div class='c'>地址:</div>
            <div id='address'></div>
            <div class='c'>最近的路口:</div>
            <div id='nearestJunction'></div>
            <div class='c'>最近的路:</div>
            <div id='nearestRoad'></div>
            <div class='c'>最近的POI:</div>
            <div id='nearestPOI'></div>
        </div>
    </div>
    <div id="container1"> </div>
    <!-- 同步加载 -->
    <!-- <script type="text/javascript">
        var map = new AMap.Map('container', {
            center: [117.000231, 36.456755],
            zoom: 11
        })
    </script> -->
 
    <!-- 异步加载,推荐使用, 异步加载指的是为 js API指定加载的回调函数,在 js API 的主体资源加载完毕之后,将自动调用该回调函数. 回调函数应该声明在 JS API入口文件引用之前,异步加载可以减少其对其他脚本执行的阻塞, -->
    <script type="text/javascript">
        // var position = new AMap.LngLat(116, 39);//标准写法
        // var position = [116, 39]; //简写, 经纬度不能加引号
 
        // 创建地图
        // 如果不传入center坐标, 会默认定位到所在城市,可以使用插件进行自动定位
        var map = new AMap.Map('container', {
            // center: [117.000000, 38.000000], //设置地图中心点坐标
            zoom: 14, //级别, 级别与地图尺寸成正比,越大越详细, web最小为3级,高德最大为20
            viewMode: '2D', // 设置地图的显示样式
            lang: 'zh_cn',  //设置地图语言类型
            mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
        });
        // 加载一个(不使用数组)或多个插件
        AMap.plugin(['AMap.ToolBar', 'AMap.Driving', 'AMap.CitySearch', 'Zepto'], function () {
            var toolbar = new AMap.ToolBar(); //工具条, 地图的缩放,平移
            map.addControl(toolbar);
            // var driving = new AMap.Driving(); // 驾车路线规划
            // driving.search("参数")
 
            // ip定位
            var citySearch = new AMAP.citySearch()
            citySearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // 查询成功, result为当前所在城市信息
                    // result.bounds  为当前所在经纬度, 113.315606,34.536169
                    if (result && result.city && result.bounds) {
                        var cityinfo = result.city;
                        var citybounds = result.bounds;
                        // document.getElementById('info').innerHTML = '您当前所在城市：' + result.bounds;
                        //地图显示当前城市
                        map.setBounds(citybounds);
                    }
                } else {
                    // document.getElementById('info').innerHTML = result.info;
                }
            });
 
        });
 
 
        // 加载ui模块, 可以地图选点
        // 'control/BasicControl' 多个地图图层的组件
        // misc/PositionPicker 选坐标的组件
        AMapUI.loadUI(['misc/PositionPicker', 'control/BasicControl'], function (PositionPicker) {
            // 如果使用ui组件, map 则在ui组件里定义即可
            var map = new AMap.Map('container', {
                zoom: 16,
                scrollWheel: false
            })
            var positionPicker = new PositionPicker({
                mode: 'dragMarker',
                map: map,
                iconStyle: { //自定义外观
                    url: 'https://webapi.amap.com/ui/1.0/assets/position-picker2.png',
                    ancher: [24, 40],
                    size: [48, 48]
                }
            });
 
            positionPicker.on('success', function (positionResult) {
                document.getElementById('lnglat').innerHTML = positionResult.position;
                document.getElementById('address').innerHTML = positionResult.address;
                document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
                document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
                document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
            });
            positionPicker.on('fail', function (positionResult) {
                document.getElementById('lnglat').innerHTML = ' ';
                document.getElementById('address').innerHTML = ' ';
                document.getElementById('nearestJunction').innerHTML = ' ';
                document.getElementById('nearestRoad').innerHTML = ' ';
                document.getElementById('nearestPOI').innerHTML = ' ';
            });
            var onModeChange = function (e) {
                positionPicker.setMode(e.target.value)
            }
            var startButton = document.getElementById('start');
            var stopButton = document.getElementById('stop');
            var dragMapMode = document.getElementsByName('mode')[0];
            var dragMarkerMode = document.getElementsByName('mode')[1];
            AMap.event.addDomListener(startButton, 'click', function () {
                positionPicker.start(map.getBounds().getSouthWest())
            })
            AMap.event.addDomListener(stopButton, 'click', function () {
                positionPicker.stop();
            })
            AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
            AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);
            positionPicker.start();
        })
 
        //多个地图图层
        AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {
            var layerCtrl1 = new BasicControl.LayerSwitcher({
                position: 'tr'
            });
            var map1 = new AMap.Map('container1', {
                //这里将layerCtrl中启用的图层传递给map
                layers: layerCtrl1.getEnabledLayers()
            });
            map1.addControl(layerCtrl1);
            var layerCtrl2 = new BasicControl.LayerSwitcher({
                theme: 'dark',
                //自定义基础图层
                baseLayers: [{
                    enable: true, //默认显示
                    id: 'tile',
                    name: '标准图',
                    layer: new AMap.TileLayer()
                }, {
                    id: 'satellite',
                    name: '卫星图',
                    layer: new AMap.TileLayer.Satellite()
                }],
                //自定义覆盖图层
                overlayLayers: [{
                    enable: true,
                    id: 'traffic',
                    name: '路况图',
                    layer: new AMap.TileLayer.Traffic()
                }, {
                    id: 'roadNet',
                    name: '路网图',
                    layer: new AMap.TileLayer.RoadNet()
                }]
            });
            var map2 = new AMap.Map('container1', {
                //这里将layerCtrl中启用的图层传递给map
                layers: layerCtrl2.getEnabledLayers()
            });
            map2.addControl(layerCtrl2);
        });
 
 
 
        map.on('complete', function () {
            // 地图加载完成后触发complete事件
        })
        // map.destroy(); // 销毁地图,并清空地图容器
 
 
 
    </script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7"></script>
    <!-- 或者 -->
    <!-- <script>
        window.onLoad = function(){
            var map = new AMap.Map("container");
        }
        var url = 'https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7'
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.scr = url;
        document.head.appendChild(jsapi);
    </script> -->
</body>
 
</html>

两者的区别

1、对于使用者的主要区别：

高德注重导航的功能，

1、有很多路连名字都没有，但是高德依旧可以标记出来

用于骑行、徒步等低速运动，需要更详细地显示细节，高德地图则好于百度

2、高德语音提示比较全面，导航只听语音的话

百度注重生活的功能

1、实景功能 三维效果逼真，方便用户能够精准的找出目的位置

2、商家服务 对查找商家等

路线的优选

高德会给出路程最短的（省油，适合长图）

百度则有更多的考虑，包括避开拥堵路段（省时，适合城市里）

2、对开发者的主要区别：

百度地图：

网页版地图平台更好（Android、IOS、WEB）。

支持全景API

POI数据很丰富

缺点：api文档（烂的一批）

高德地图：

开发者人群的支持面更高，

平台适用性更好（Android、IOS、windows phone、Win8、web）。

汇智知了堂
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高德地图 添加路线 删除路线 demo
04-18
高德地图添加路线，移除路线以及更改路线颜色、宽度等操作 高德地图其他操作都很简单就没有涉及
通过promise控制事件执行顺序----高德地图获取定位和天气
zhangting8_的博客
05-10 534
//利用高德地图获取天气和定位 promise实现先获取定位，拿到定位后得到的城市名获取天气 let prom = new Promise( (resolve,reject)=>{ let AMap = window.AMap; AMap.plugin('AMap.CitySearch',()=> { var citySearch = new AMap.CitySea...
vue3使用百度地图实现个性化地图和轨迹
Dnn01的博客
02-29 852
vue3使用百度地图实现个性化地图和轨迹
百度离线地图示例之六：添加多个标注点
xiaoge_586的博客
02-18 2536
前言介绍： 主要是基于v3.0的API版本进行的离线，纯内网可操作，基本上实现了现有90%以上的功能点，能兼容jpg和png格式的瓦片图层，实现了原生和基于Vue两个版本，实现的功能点概要如下： 地图示例： 地图展示 同时加载两个地图 设置地图最大及最 小级别移动地图 缩放地图 拖拽地图 设置地图显示范围 获取地图显示范围 测距 地图控件： 工具条、比例尺控件 地图类型 缩略图控件 添加版权控件 添加自定义控件 覆盖物示例： 添加/删除覆盖物 折线上添加方向箭头 添加动画标注点 设置点的新图标 设
vue里面实现百度地图 标记多点 地点连线
郑州彭于晏
03-27 5058
<template> <div id="allmap"></div> </template> <script> export default { data() { return { arrayList: [] }; }, methods: { BaiduMap() { //...
百度地图添加路线轨迹
lovely960823的博客
05-08 3234
基于上篇实现几个轨迹点实现连线 效果图 上篇显示了多个设备点。现在实现通过该设备点点击的时候查看该设备的运动轨迹。吧上篇文章的方法重新修改一下即可。其他方法不用变，这个稍微修改一下，获取到对弈你的id，到时候通过id查询到该设备存在的经纬度记录，然后把数据加载出来。这个方法原来是弹出信息窗口的，改编成路径跳转就行，跳转的时候带上id。 function openInfo(content,e){ ...
使用高德地图的api获取所在城市
qq_33631461的博客
08-06 7115
学习前段是做网页用到地图api时，研究的成果，小白勿喷
前端调用高德地图的接口
cp_123321的博客
11-19 1939
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
通过原生JS高德定位，获取定位经纬度
cora_biubiu的博客
05-05 2372
// 高德定位 export function getLocation() { AMap.plugin(“AMap.Geolocation”, function() { var geolocation = new AMap.Geolocation({ // 是否使用高精度定位，默认：true enableHighAccuracy: true, // 设置定位超时时间，默认：无穷大 timeout:...
选中回填 高德_基于高德地图API的通用地点选择组件
weixin_39910824的博客
01-14 620
最近有个邀请函的需求，其中有一个地点选择的需求。大致的流程是：信息填写页 - (点击) - 地图选择页面 -(搜索选择地点后返回) - 数据自动填充到信息页面之前没有接触过基于地图API的开发，目前国内的主流的两款地图软件也就高德和百度，简单看了下两个的API文档，最后选择高德，个人感觉高德的API文档写的要好点。开始高德地图有很多，我们这里选择的是JavaScript API，要使用某个具体的首...
vue利用百度地图api画路线&打点&滑入展示（坐标）
weixin_44197797的博客
06-30 6193
1.创建地图容器 <div id="allmap" style=" border-radius: 5px;" ></div> 2.展示百度地图 guiji() { var map = new BMap.Map('allmap') var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标 } 3.画出路线（注意看注释） guiji() { var map = new BMa
百度地图根据起始点经纬度坐标确认最佳路线规划
09-18
百度地图根据起始点经纬度坐标确认最佳路线规划。参见：https://lockdatav.blog.csdn.net/article/details/120373978
自定义划分区域获取区域内坐标点-百度地图
12-04
调用百度地图API，实现自定义划分区域，圆型，长方形，不规则图形，并能够计算区域内的坐标点数，并使用了点聚合方式渲染大量的坐标点
百度地图中国所有城市经纬度坐标点
09-04
百度地图，中国所有城市的经纬度坐标点，以省为单位将下属所有城市进行归纳划分，以如下格式进行展示，需要的朋友可以下载拿走用 n: "北京", g: "116.395645,39.929986|12
高德、百度坐标系转天地图坐标系
06-06
高德、百度坐标系转天地图坐标系，亲测实际有效，误差很小。
百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体
12-22
1、获取多个坐标点标注在地图上 2、根据不同状态显示不同的信息窗口样式 3、根据地址检索坐标点（可显示多个） 4、鼠标点击抓取坐标 5、运动轨迹（标记起始位置和终点位置）
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
百度地图API常使用的有哪些
08-18
### 回答1： 百度地图API有多种不同的服务，常用的有以下几种： 1. 地图显示API：可以在网页或移动应用中展示百度地图，并提供地图操作功能，如地图浏览、定位、搜索、路线规划等。 2. 地理编码API：可以将地址转换为经纬度坐标，或者将经纬度坐标转换为地址。 3. 公交换乘API：可以查询公交线路、换乘方案、公交站点等信息。 4. 驾车导航API：可以查询驾车路线、导航信息，并提供实时路况信息。 5. 步行导航API：可以查询步行路线、导航信息。 6. 周边搜索API：可以查询指定位置周边的指定类型的地点信息。 7. 地图标记API：可以在地图上添加标记、信息窗口、自定义图标等。 这些API都可以通过调用百度地图的web服务来使用，通常需要申请并获取API key才能使用。 ### 回答2： 百度地图API是一系列提供地理位置、地图功能的接口，常用于开发地图相关的应用程序。以下是百度地图API常用的功能： 1. 地理编码：将地址文本转换为经纬度坐标，用于实现地址解析和坐标转换功能。 2. 逆地理编码：将经纬度坐标转换为地址信息，用于实现地图位置反查功能。 3. 路线规划：提供不同交通方式下的最优路线规划，包括驾车、公交、步行等，可以根据起点、终点和途经点计算出最短路径。 4. 地点检索：通过关键词检索、分类检索等方式，可获取周边的商铺、景点、公交站等POI（兴趣点）信息。 5. 关键词提示：根据用户输入的关键词，提供相关的地点或搜索建议，用于辅助用户快速输入和搜索。 6. IP定位：根据用户的IP地址获取其大概的地理位置信息，可用于提供个性化的服务和广告投放。 7. 静态地图：生成包括地图、标记、路线等的静态图片，可以用于将地图嵌入到网页中。 8. 热力图：根据数据点的密度生成热力图，展示人流量、热门区域等信息。 9. 实时路况：获取交通拥堵情况，可以用于实时展示路况和规划避堵路线。 10. 行政区划：提供国内的省、市、区县行政区划信息，可用于地理分类、边界绘制等功能。 以上是百度地图API的常用功能，开发人员可以根据具体需求选择并结合使用，实现各种地图相关的应用程序。 ### 回答3： 百度地图API是一套提供地图相关功能的开发接口，常被开发者用于地图显示、地理位置搜索、路径规划、地图标注等功能的实现。 其中，最常使用的百度地图API包括以下几个： 1. 地图显示：可以使用地图展示接口，将百度地图显示在自己的网站或应用中。通过该接口，可以设置地图的中心点坐标、缩放级别、控件样式等。 2. 地理位置搜索：百度地图API提供了地理编码和逆地理编码接口，可以通过地址或经纬度查询相应的地理位置信息，比如某个地址的经纬度，或者某个经纬度对应的位置详情。 3. 路径规划：百度地图API提供了驾车、骑行、步行等多种路径规划接口，可以根据起终点经纬度计算出最短路径、最优路线等，同时也可以设置途经点和避让区域。 4. 地图标注：可以通过标注接口在地图上添加标注点、信息窗口、折线、面等元素，用于展示特定地点、路线和区域的相关信息。 5. 周边搜索：通过周边搜索接口，可以根据指定的关键字和中心点经纬度，搜索周围的特定类型的POI（兴趣点）信息，比如餐厅、银行、酒店等。 6. 街景服务：百度地图API还提供了街景接口，可以展示全景地图，提供全景图像的浏览和导航功能。 以上是百度地图API常见的几个功能，通过这些功能，开发者可以实现地图相关的各种应用，满足用户对地理位置信息的查询和展示需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值