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

最新推荐文章于 2024-05-06 17:53:52 发布
最新推荐文章于 2024-05-06 17:53:52 发布
阅读量2k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 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
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue如何根据ip地址获取实时当地城市、时间、天气
bg22223的博客
05-05 2162
// 分 minute: ‘’, // 月 month: ‘’, // 日 date: ‘’, // 星期几 day: ‘’, // 出勤率echart数据 }, } } 在methods中定义获取城市的方法getLocalCity，在created()中调用 getLocalCity() { var data = { key: ‘KSPBZ-V5L33-5EM3D-35N5X-DIY66-CRF7J’, //申请的密钥,写死就行 } var url = ‘https://apis.map.qq.com/w
使用C#调用百度地图并实现坐标点的设置以及读取示例
08-18
在本文中，我们将探讨如何使用C#语言调用百度地图API，并实现坐标点的设置和读取功能。这对于开发涉及地理位置的应用程序或需要在界面上显示地图的项目非常有用。以下是一步步的详细说明： 首先，你需要在百度地图...
通过promise控制事件执行顺序----高德地图获取定位和天气
zhangting8_的博客
05-10 546
//利用高德地图获取天气和定位 promise实现先获取定位，拿到定位后得到的城市名获取天气 let prom = new Promise( (resolve,reject)=>{ let AMap = window.AMap; AMap.plugin('AMap.CitySearch',()=> { var citySearch = new AMap.CitySea...
【百度地图API】自定义途经点路线拼接
最新发布
weixin_44596422的博客
05-06 462
上面两个博主用的都是BMap版本，我这里加个BMapGL版本的，主要是BMap版本的BMap.DrivingRoute和BMapGL.DrivingRoute规划的路线不一样，这里不贴图了，大家有兴趣可以自行去试试，这里主要用的new BMapGL.DrivingRouteLine来对应BMap.DrivingRoute，实现的代码思路和上面两位博主的也不太一样。https://blog.csdn.net/qq_39309642/article/details/89447301 【在上一篇博主的改进】
vue获取当前位置的信息以及天气信息
weixin_56166823的博客
07-11 3106
/ 当地信息（城市、时间、地点、天气）local: {// ip地址所在城市city: '',// 所在城市温度// 天气类型type: '',// 时hour: '',// 分// 月month: '',// 日date: '',// 星期几day: ''// 出勤率echart数据},// 经纬度信息lat: null,lng: null},
vue 根据百度地图 API—画出运动轨迹
技术前端，忠于热爱 @回忆哆啦没有A梦
04-01 9070
vue 根据百度地图 API—画出运动轨迹 vue 根据百度地图 API—画出运动轨迹，并且让最后的点显示在屏幕正中心，根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标 首先在index.html先引入百度地图API 然后： <template> <div class="page"> <!-- header --&g...
php高德根据ip获取经纬度,IP城市定位-定位-示例中心-JS API 示例 | 高德地图API
weixin_42355311的博客
03-23 500
根据ip定位html,body,#container{height:100%;}var map = new AMap.Map("container", {resizeEnable: true,center: [116.397428, 39.90923],zoom: 13});//获取用户所在城市信息function showCityInfo() {//实例化城市查询类var citysearch ...
java百度地图获取经纬坐标和图例显示文档
02-14
在Java编程中，使用百度地图API来获取经纬坐标并实现图例显示是常见的地理信息系统（GIS）应用。本文将深入探讨这一主题，帮助初学者掌握关键知识点。 首先，要使用百度地图API，你需要在百度地图开放平台...
html百度地图批量读取本地坐标点并作坐标转换打点
02-27
2. **百度地图API**：百度地图API是百度提供的一套服务，允许开发者在其网站或应用中集成百度地图功能，包括地图显示、定位、路线规划等。在这个项目中，我们将利用它的JavaScript API来加载地图、设置中心点、添加...
利用百度地图实现路书实时轨迹边走边划
07-12
3. **获取用户位置**：使用百度地图SDK中的定位服务，持续获取用户的经纬度坐标。在Android和iOS中，可以调用相应的定位接口；在Web端，可以监听地图的定位事件。 4. **绘制轨迹**：每当获取到新的位置信息时，将其...
百度地图API调用_实现百度地图动态搜索、静态地图动态插入
07-17
百度map,百度map API,百度地图 实现百度地图动态搜索、静态地图动态插入 mygw@163.com js 内容如下： /** 加载地图的主控类 */ var MapControl={ staticWith : 512,//链接静态图宽度 staticHeight : 320,//链接静态图的高度 container : 'mapcontainer',//显示map的节点id defzoom:12,//默认缩放比例 map : '', marker : '', city : '深圳', infoWinContent : '请移动此标记到您的婚礼地点位置！', /** 提示信息窗内容 */ infoOpts : { width : 100, // 信息窗口宽度 height: 50, // 信息窗口高度 title : "提示：" // 信息窗口标题 }, /** *默认显示窗口 */ defWindow : function(){ this.map = new BMap.Map(this.container); this.map.centerAndZoom(this.city,this.defzoom); // 通过城市名初始化地图 this.map.addEventListener("load", function(){ // 初始化方法执行完成后即可获取地图中心点信息 MapControl.marker = new BMap.Marker( this.getCenter()); // 创建标注 this.addOverlay(MapControl.marker ); // 将标注添加到地图中 MapControl.marker.enableDragging(); var infoWindow = new BMap.InfoWindow(MapControl.infoWinContent, MapControl.infoOpts); // 创建信息窗口对象 MapControl.marker.addEventListener("mouseover", function(){ this.openInfoWindow(infoWindow); // 打开信息窗口 }) MapControl.marker.addEventListener("mouseout", function(){ this.closeInfoWindow(); // 打开信息窗口 }) }) //map 增加操作 this.map.addControl(new BMap.NavigationControl()); this.map.addControl(new BMap.ScaleControl()); this.map.addControl(new BMap.OverviewMapControl()); this.map.addControl(new BMap.MapTypeControl()); }, /** * 搜索地址 */ search : function(address){ if(this.map=='' || this.map == 'undefined' || address=='' ){ return ; } this.city=address; this.defWindow(); }, /** * 获取静态图片地址 */ getStaticMap : function(){ if(this.map=='' || this.map == 'undefined' || this.marker=='' ){ return ; } var center=this.map.getCenter().lng+','+this.map.getCenter().lat; var markers= this.marker.getPosition().lng+','+this.marker.get
高德地图JS API调用实例
02-02
定位-搜索-周边检索-路径规划-导航.html——浏览器定位，搜索地点定位，定位点周边搜索，自定义信息窗体，步行路径规划 标记bjdemo.html——标记点，显示坐标 鼠标绘制点线面.html——地图上绘制多边形，右键编辑多边形
Android 百度地图之自定义公交路线源码.zip
07-17
在项目中集成百度地图SDK，需要在AndroidManifest.xml文件中添加相应的权限和服务声明，并在build.gradle中引入百度地图的依赖库。 接着，要实现自定义公交路线，我们首先需要理解百度地图API中的路径规划服务。...
Vue项目基于vue-baidu-map绘制渐变轨迹及箭头
bueryao527的博客
04-28 3234
Vue项目基于vue-baidu-map绘制渐变颜色及箭头 效果图 一、CanvasLayer.js function CanvasLayer(options) { this.options = options || {}; this.paneName = this.options.paneName || 'labelPane'; this.zIndex = this.options.zIndex || 0; this._map = options.map; thi
百度地图的常用事件和方法
weixin_44860226的博客
07-06 3911
百度地图的常用事件和方法总结。涉及地图缩放、拖曳、点击等等各种常见地图操作的方法大合集
vue-baidu-map地图定位和轨迹路书
qq_16785561的博客
10-20 1400
项目需求接入第三方接口获取车辆的实时定位信息和历史轨迹，记录一下使用vue-baidu-map开发的过程。安装vue-baidu-map，参考。1、地图定位组件，更换标点图标，设置动画效果。2、轨迹组件及设置起始点坐标图片。
百度地图API根据经纬度绘制轨迹图（Vue附源码）
Codernmx
03-17 5576
目录导入百度地图绘制轨迹左侧点击事件添加窗口页面完整代码 有用可以点个关注，收藏！！ vue版本百度地图官方组件：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 这里不是使用的这种办法，个人感觉不是很完整，需要的自己研究下。 导入百度地图 importBaiduMap () { var script = document.createElement('script'); script.src = 'https://api.map
百度地图自定义信息窗口样式
dandan__666的博客
02-11 4975
在项目中，UI经常会把弹窗做自定义设计，那么如何实现自定义样式的地图弹窗呢，废话补多少，直接上代码 1、引入依赖文件 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script> <script type="text/javascript" src="js/InfoBox_min.js"></script> 2、创建地图容器 <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值