<%@ page language="java" contentType="text/html; charset=utf-8"

         pageEncoding="utf-8"%>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        body, html,#allmap {

            width: 100%;

            height: 100%;

            overflow: hidden;

            margin:0;

        }

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

    <title>step1</title>

</head>

<body>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

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

    var point = new BMap.Point(116.10 ,38.98);// 创建点坐标

    map.centerAndZoom(point, 13);//设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

    map.addControl(new BMap.NavigationControl());//缩放平移控件

    map.enableScrollWheelZoom();//利用鼠标滚轮控制大小

    var start_longitude=116.233093;//开始经度

    var start_latitude=39.04607;//开始纬度

    var stop_longitude=116.235352;//结束经度

    var stop_latitude=39.041691;//结束纬度

    var address=["乡里乡情铁锅炖南228米","擎天矿用材料有限公司北609米"];

    /**********   Begin   **********/

    //1.初始化路程线

    var start_longitude=116.233093;//开始经度

    var start_latitude=39.04607;//开始纬度

    var stop_longitude=116.235352;//结束经度

    var stop_latitude=39.041691;//结束纬度

    var polyline = new BMap.Polyline([  

       new BMap.Point(start_longitude, start_latitude),  

       new BMap.Point(stop_longitude, stop_latitude)  

    ],{strokeColor:"red",strokeWeight:3,strokeOpacity:0.5});//创建一条宽度为3外边框透明度为0.5的红色线  

    //2.将线添加到地图上

map.addOverlay(polyline);//将线添加到地图上  

    //3.调用绘制箭头线函数

addArrow(polyline,10,Math.PI/7);

    //4.设置起始点标注

var marker = new BMap.Marker(new BMap.Point(start_longitude,start_latitude)); //创建开始位置标注  

var marker1 = new BMap.Marker(new BMap.Point(stop_longitude,stop_latitude)); //创建开始位置标注  

var label = new BMap.Label(address[0], {offset: new BMap.Size(20, 0)});//给标注设置文字描述  

var label1 = new BMap.Label(address[1], {offset: new BMap.Size(20, 0)});//给标注设置文字描述

marker.setLabel(label);//将文字描述设置到标注上  

map.addOverlay(marker);//将标注添加到地图中  

marker1.setLabel(label1);

map.addOverlay(marker1);

    /**********   End   **********/

    //绘制箭头的函数

    function addArrow(polyline,r,angle){

        var linePoint=polyline.getPath();//线的坐标串（里面存的就是起始点的坐标点）

        var arrowCount=linePoint.length;

        for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头

            var pixelStart=map.pointToPixel(linePoint[i-1]);

            var pixelEnd=map.pointToPixel(linePoint[i]);

            var pixelTemX,pixelTemY;//临时点坐标

            var pixelX,pixelY,pixelX1,pixelY1;//定义箭头两个点坐标

            var delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);//主线斜率，垂直时无斜率

            var param=Math.sqrt(delta*delta+1);//代码简洁考虑

            if((pixelEnd.x-pixelStart.x)<0){ //第二、三象限

                pixelTemX=pixelEnd.x+ r/param;

                pixelTemY=pixelEnd.y+delta*r/param;

            }else{ //第一、四象限

                pixelTemX=pixelEnd.x- r/param;

                pixelTemY=pixelEnd.y-delta*r/param;

            }

            //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法

            pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;

            pixelY=pixelTemY-Math.tan(angle)*r/param;

            pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;

            pixelY1=pixelTemY+Math.tan(angle)*r/param;

            var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));

            var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));

            var Arrow = new BMap.Polyline([

                pointArrow,linePoint[i],pointArrow1

            ], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});

            map.addOverlay(Arrow);

            return Arrow;

        }

    }

</script>

# html5
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局