Angular2+高德地图实现自动补全，轨迹，文本标记

本文链接：https://blog.youkuaiyun.com/qq_35546153/article/details/119532866

前言

angular2 实现地图，调用高德地图js api即可

参考文档

1. https://lbs.amap.com/demo/jsapi-v2/example/map-lifecycle/map-show

正文

1. 在index.html中引入地图js插件

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
  <script src="http://webapi.amap.com/maps?v=1.4.3&key=30ec74b63a74d427b0df1f1ef3323075"></script>

2. component.ts组件中直接引用高德地图js即可

declare var AMap: any;

export class MapComponent {

 getLine() {
      let distance = "";
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [112.547088, 37.794912],//地图中心点
            zoom: 13 //地图显示的缩放级别
        });
        //构造路线导航类
        map.plugin(['AMap.Driving'], () => {
            // 设置地位标记为自定义标
            let driving = new AMap.Driving({
                map: map,
                panel: "panel"
            });
          driving.clear();
            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(112.547088, 37.794912), new AMap.LngLat(112.546982, 37.807023), function (status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    console.log('绘制驾车路线完成')
                  distance = result.routes[0].distance / 1000 + "公里";
                  console.log(result.routes[0].distance/1000+"公里");
                  var text = new AMap.Text({
                    text: '距离为:' + distance,
                    anchor: 'center', // 设置文本标记锚点
                    draggable: true,
                    cursor: 'pointer',
                    style: {
                      'padding': '.75rem 1.25rem',
                      'margin-bottom': '1rem',
                      'border-radius': '.25rem',
                      'background-color': 'white',
                      'width': '15rem',
                      'border-width': 0,
                      'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                      'text-align': 'center',
                      'font-size': '20px',
                      'color': 'blue'
                    },
                    position: [112.547088, 37.794912]
                  });

                  text.setMap(map);
                } else {
                    console.log('获取驾车数据失败：' + result)
                }
            });
            //  添加插件
            map.addControl(new driving);
        });
        console.log("distance"+distance)
      

    }
}

以上是路径规划和文本的调用

加载自动补全的需要关联component.html中的输入框

ts文件代码

//  加载输入类插件
        map.plugin('AMap.Autocomplete', () => {
            //  实例化
            let auto = new AMap.Autocomplete(autoOptions);
            // 加载插件
            map.addControl(auto);
        });
        // 加载收索类插件
        map.plugin('AMap.PlaceSearch', () => {
            //   实例化
            let placeSearch = new AMap.PlaceSearch({
                map: map
            });  // 构造地点查询类
            //   加载插件
            map.addControl(placeSearch);
            //  注册监听事件，当选中某条记录的时候就会触发
            AMap.event.addListener(new AMap.Autocomplete(autoOptions), "select", (e) => {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            });

        });

html代码

<h2>{{title}}</h2>
<div id='container' style='width:1200px; height:600px;'></div>
<div id="panel"></div>
<input type="button" width="220px" value="规划路线" (click)="getLine()" />
<input type="text" #tipinput id="tipinput">