code编写百度地图添加目标点，并计算距离位置金额

最新推荐文章于 2023-08-07 00:53:18 发布

小axie

最新推荐文章于 2023-08-07 00:53:18 发布

阅读量404

点赞数

文章标签：百度 intellij-idea javascript

本文链接：https://blog.csdn.net/weixin_54039480/article/details/122017385

版权

1.获的属于自己的key

1.打开百度地图api

打开网址：百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)

由于是在code上编写的网页版，所以点击JavaScript API

2.进去之后点击开发指南获取账号

按照使用方法注册获取自己的百度账号，并获取自己的服务密匙

2.示例DEMO

关于百度地图开发的所以示例，全部都在示例DEMO中，可根据需求来进行使用

3.code源码：

<!DOCTYPE html>

<html>

<head>

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,u ser-scalable=no">

src="http://api.map.baidu.com/api?v=3.0&ak=自己的开发密实"></script>

</head>

<body>

<span>

</span>

<span οnclick="window.location.href = 'tel://10000'">咨询

</span>

</div>

</p>

<span id="addressText">河南省郑州市</span>

</p>

</p>

<div>

</div>

<div>

</div>

提交

</div>

<div>

<p>以上收费仅包含救援服务费，救援过程中产生的费用需要您承担，如有产生费用，请在服务完成后现场支付给师傅，包含：</p>

<p>1.救援过程中产生的过路、过桥、停车等费用；</p>

<p>2.换胎如需购置轮胎，需要您承担购置费；</p>

<p>3.地库和加附轮各需额外支付100元费用；</p>

<p>取消收费规则：</p>

<p>1.报案成功后10分钟之内可免费取消</p>

<p>2.超过10分钟后师傅到达现场前，将收取基础费用的50%作为服务师傅的辛苦费；</p>

<p>3.师傅到达现场后，取消不退费；</p>

<span>24小时救援客服热线：<a href="tel:123456">123456</a></span> <br />

<span>服务监督电话：<a href="tel:123456">123456</a></span>

</div>

</div>

<p>

</p>

<span>救援服务协议</span>

</p>

<p>

<span>救援客服热线 <a style="color: blue;position: relative;top: -0.06rem;margin-left: 0.1rem;"

href="tel:110">123456</a></span>

</p>

</div>

</form>

</body>

var point = new BMap.Point(113.838736,34.728955); // 指定厚朴it学院坐标点(当作公司的出车所在地)

// var point = new BMap.Point(113.836953, 34.728566); // 指定坐标点(当作公司的出车所在地)

var map = new BMap.Map("map");// 创建地图实例

var point = new BMap.Point(113.838736,34.728955); // 指定厚朴it学院坐标点(当作公司的出车所在地)

map.centerAndZoom(point, 17);// 初始化地图，设置中心点坐标和地图级别

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

//公司地点

var json_data =[[113.837427,34.72969],[113.837975,34.728837],[113.839206,34.731307],[113.83996,34.728837]]

//创建一个list集合

var pointArray= new Array();

for (var i = 0; i < json_data.length; i++) {

//将公司地点显示到地图中

var maker = new BMap.Marker(new BMap.Point(json_data[i][0],json_data[i][1]));

map.addOverlay(maker);

//将公司经纬度拼接成为字符串

pointArray.push(json_data[i][0]+","+json_data[i][1]);

}

// 添加带有定位的导航控件

var navigationControl = new BMap.NavigationControl({

// 靠左上角位置

anchor: BMAP_ANCHOR_TOP_LEFT,

// LARGE类型

type: BMAP_NAVIGATION_CONTROL_LARGE,

// 启用显示定位

enableGeolocation: true

});

map.addControl(navigationControl);

// 添加定位控件

var geolocationControl = new BMap.GeolocationControl();

geolocationControl.addEventListener("locationSuccess", function (e) {

// 定位成功事件

var address = '';

address += e.addressComponent.province;

address += e.addressComponent.city;

address += e.addressComponent.district;

address += e.addressComponent.street;

address += e.addressComponent.streetNumber;

alert("当前定位地址为111111111111111111：" + address);

});

geolocationControl.addEventListener("locationError", function (e) {

// 定位失败事件

alert(e.message);

});

map.addControl(geolocationControl); // 添加定位控制条

var marker2 = new BMap.Marker(point); // 创建标注

map.addEventListener("click", showInfo); // 地图的点击事件, 点击后创建一个红色的点点

var name;

var lng = 1.0;

var lat = 1.0;

function showInfo(e) {

map.removeOverlay(marker2); // 每点击一次, 删除之前点点标注

document.getElementById("lng").value = e.point.lng; /// 得到新的经纬度

lng=e.point.lng;

document.getElementById("lat").value = e.point.lat; /// 得到新的经纬度

lat=e.point.lat;

marker2 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 把新的坐标系添加给点点标注

map.addOverlay(marker2); /// 地图添加新的坐标的点点标注

var point = new BMap.Point(e.point.lng, e.point.lat); //获取当前地理名称

var gc = new BMap.Geocoder();

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents;

name = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + ",";

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

});

console.log("发送 ajax 到后台,, 去计算2点之间的距离, 根据距离的长短 , 算出人民币, 渲染到前端的金钱的标签里")

//顾客的坐标 m n 公司的坐标 x y

$.ajax({

type: 'post',

url: 'http://127.0.0.1:9007/api/customer/getMoney',

data: {

'm':lng,

'n':lat,

'xy':pointArray

dataType: 'json',

success: function(res) {

if (res.code == 200) {

console.log(res.data)

}

})

}

</script>

</html>

4.后台代码：

package com.xiexin.controller;

import com.xiexin.bean.Orders;
import com.xiexin.service.OrdersService;
import com.xiexin.util.MapUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/api/customer")
@CrossOrigin(origins = "*")
public class CustomerController {
    @Autowired
    private OrdersService ordersService;

    // 计算上门服务的金额。   千米数 /  100 得出 money
    @RequestMapping("/getMoney")
    public Map getMoney(double m, double n, @RequestParam("xy[]")List<String> json_data) {
        List<Integer> moneyList = new ArrayList<>();
        System.out.println("json_data.size"+json_data.size());
        for (int i = 0; i < json_data.size(); i++) {
            double x=Double.parseDouble(json_data.get(i).split(",")[0]);
            double y=Double.parseDouble(json_data.get(i).split(",")[1]);
            double algorithm = MapUtils.algorithm(m, n, x, y);
            int money = (int) (algorithm / 100);
            moneyList.add(money);
        }
        System.out.println("moneyMap = " + moneyList);
        Map codeMap = new HashMap();
        codeMap.put("code", 200);
        codeMap.put("msg", "计算成功");
        codeMap.put("data", moneyList);
        return codeMap;
    }

    // 提交订单
    @RequestMapping("/subOrders")
    public Map subOrders(Orders orders) {
        orders.setStatus("0");
        int i = ordersService.insertSelective(orders);
        Map codeMap = new HashMap();
        if (i==1){
            codeMap.put("code",200);
            codeMap.put("msg","订单提交成功");
            return codeMap;
        }else{
            codeMap.put("code",40001);
            codeMap.put("msg","订单提交失败");
            return codeMap;
        }

    }

}