2020-10-09 调用百度地图接口实现的添加坐标点和路线的小Demo

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

  1. 在地图上添加位置点,并添加位置点的名称备注,右键停止添加位置点,添加点之后在左侧有一个位置点的列表,当点击列表中的点时,地图会将中心点移动到该点,并在点上显示标签为该位置点的名称备注。
  2. 在地图上可以添加一条路线,完成路线时右键停止,然后点击保存路线会弹出该线上所有折点的位置点所构成的字符串,点击编辑路线,路线就开启编辑功能,可以修改路线。
    项目放在了服务器上,请访问本地址进行测试 (http://139.9.119.192:8081/baiduMap/Map.html)

下面是添加点的效果图
在这里插入图片描述
添加路线时的效果图
在这里插入图片描述

以下是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();
}

项目放在了github仓库 https://github.com/ljz911/baiduMap,欢迎star,如果阅读之后觉得对你有帮助就请点个赞或者关注 支持一下!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解了您的问题。首先,需要确认您是以哪种编程语言开发order-demo和product-demo服务,以便确定如何增加接口。接下来,我可以提供一些通用的建议: 1. 在order-demo服务中增加调用product-demo接口所需的代码。 2. 确保在order-demo中引入product-demo的API依赖。 3. 在order-demo中编写代码以调用product-demo服务的API。 4. 测试order-demo调用product-demo服务是否正常工作。 以下是在Java Spring框架中实现的示例代码: 1. 在order-demo中增加调用product-demo服务的代码。 ```java @RestController @RequestMapping("/order") public class OrderController { @Autowired private RestTemplate restTemplate; @GetMapping("/test") public String test() { String productResponse = restTemplate.getForObject("http://localhost:8081/product/test", String.class); return "Order test. Product response: " + productResponse; } } ``` 2. 在order-demo中引入product-demo的API依赖。 ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web-services</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> ``` 3. 在order-demo中编写代码以调用product-demo服务的API。 ```java @RestController @RequestMapping("/order") public class OrderController { @Autowired private RestTemplate restTemplate; @GetMapping("/test") public String test() { String productResponse = restTemplate.getForObject("http://localhost:8081/product/test", String.class); return "Order test. Product response: " + productResponse; } } ``` 4. 使用postman测试order-demo调用product-demo服务是否正常工作。 在postman中输入order-demo服务的地址,发送请求,确保product-demo服务正常工作,并获得预期的响应。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值