Springboot集成高德地图

1. 创建自己的应用

高德地图官网：https://lbs.amap.com/。

控制台 $=>$ 创建应用 $=>$ 添加 key

2. Web JS开发文档

API 文档：https://lbs.amap.com/api/jsapi-v2/summary/。

要实现的功能：

1. 点标记

2. 信息窗体

3. 路线规划

4. 定位

3. 正式集成

1. 在 index.html 里面引入 script 标签

   • <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
     

2. 新建 Map.vue 页面

   • <template>
       <div>
         <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
          
         <div id="info"></div>
       </div>
     </template>
          
     <script>
     var content = [
       "<div style='font-size: 14px; color: red; width: 200px; height: 50px'>这是信息窗口</div>"
     ];
          
          
     export default {
       name: "Map",
       data() {
         return {}
       },
       created() {
          
       },
       mounted() {
         // 创建地图实例
         var map = new AMap.Map("container", {
           zoom: 12,
           // center: [116.396901,39.919544],
           resizeEnable: true
         })
          
         var infoWindow = new AMap.InfoWindow({
           anchor: 'top-right',
           content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
         });
          
         var clickHandler = function(e) {
           console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
          
           infoWindow.open(map, [116.396901,39.919544]);
         };
          
         // 绑定事件
         // map.on('click', clickHandler);
          
         var marker = new AMap.Marker({
           position: new AMap.LngLat(116.396901,39.919544),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
           title: '北京故宫',
           icon: '//vdata.amap.com/icons/b18/1/2.png',
           // content: '<div style="font-size: 12px; width: 100px">这是我自定义的内容</div>'
         })
         marker.on('click', clickHandler);
          
          
         // 将创建的点标记添加到已有的地图实例：
         map.add(marker);
          
          
         // path 是驾车导航的起、途径和终点，最多支持16个途经点
         var path = []
          
         path.push([116.303843, 39.983412])
         path.push([116.321354, 39.896436])
         path.push([116.407012, 39.992093])
          
         map.plugin('AMap.DragRoute', function () {
           var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
           // 查询导航路径并开启拖拽导航
           route.search()
         })
          
         var polyLine = new AMap.Polyline({
           path: path,
           strokeWeight: 5,
           borderWeight: 5, // 线条宽度，默认为 1
           strokeStyle: "solid",
           strokeColor: '#DC143C', // 线条颜色
           lineJoin: 'round' // 折线拐点连接处样式
         })
         map.add(polyLine)
          
          
         //实例化城市查询类
         map.plugin('AMap.Geolocation', function() {
           var geolocation = new AMap.Geolocation({
             // 是否使用高精度定位，默认：true
             enableHighAccuracy: true,
             // 设置定位超时时间，默认：无穷大
             timeout: 10000,
             // 定位按钮的停靠位置的偏移量
             offset: [10, 20],
             //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
             zoomToAccuracy: true,
             //  定位按钮的排放位置,  RB表示右下
             position: 'RB'
           })
          
           geolocation.getCurrentPosition(function(status,result){
             if(status=='complete'){
               onComplete(result)
             }else{
               onError(result)
             }
           });
          
           function onComplete (data) {
             // data是具体的定位信息
             console.log(data)
           }
          
           function onError (data) {
             // 定位出错
             console.error(data)
           }
         })
          
       },
       methods: {}
     }
     </script>
          
     <style>
          
     </style>