调用高德地图显示

最新推荐文章于 2023-12-15 11:19:27 发布
m1s2q3l4
最新推荐文章于 2023-12-15 11:19:27 发布
阅读量287
点赞数
文章标签： java 前端 javascript
本文链接：https://blog.csdn.net/m1s2q3l4/article/details/128644280
版权
<template>
  <div>
    <el-dropdown @command="switchDriving">
      <el-button type="text">{{ switchValue }}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,index) in options" :key="index" :command="index">{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 高德地图  -->
    <div id="map" style="width: 100%; height: 87vh">

      <!-- 技术支持和联系方式  -->
    </div>
    <div id="panel"></div>
  </div>


</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  // 设置安全密钥
  securityJsCode: '输入高德中的安全秘钥',
}
//weather 天气参数
//var map, route, marker,weather, infoWindow;
var map, route, marker, infoWindow,weather,driving;
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
      route: null,
      switchValue: '下拉菜单',
      options: [{
        lngLatStart: [116.408788,39.910924],
        lngLatEnd: [104.076913,30.578539],
        label: '北京-成都'
      }, {
        lngLatStart: [116.408788,39.910924],
        lngLatEnd: [87.617377,43.828795],
        label: '北京-新疆乌鲁木齐',
      }, {
        lngLatStart: [116.408788,39.910924],
        lngLatEnd: [113.271429,23.136399],
        label: '北京-广州'
      }],
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "输入key值", // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['AMap.DragRoute','AMap.Size', 'AMap.LngLat','AMap.ToolBar', 'AMap.Weather', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {

        //基本地图加载
        map = new AMap.Map("map", {
          viewMode : "2D",  //  是否为3D地图模式
          // zoom : 13,   // 初始化地图级别-->
          // center : [116.403963,39.915119], //中心点坐标  北京天安门
          zoom : 5,   // 初始化地图级别-->
          center : [113.65553,34.748764],
          resizeEnable: true
        });


        map.plugin(["AMap.ControlBar"],function(){
          var controlBar = new AMap.ControlBar()
          map.addControl(controlBar)
        });

        //加载工具条
        // map.addControl(new AMap.ToolBar());

        map.plugin(["AMap.MapType"],function(){
          //地图类型切换
          var type= new AMap.MapType({
            defaultType:0 //使用2D地图
          });
          map.addControl(type);
        });


        // 创建一个 Marker 实例：
//         marker = new AMap.Marker({
//           icon: "assets/images/poi-marker-default.png",
//           position: [116.406315,39.908775]
//         });
// // 将创建的点标记添加到已有的地图实例：
//         map.add(marker)
        // marker.setMap(map)

        //绘制初始路径
        // var path = [];
        // path.push([11206498.646510374, 5817520.957381047]);
        // path.push([11245634.404992383, 5817520.957381047]);
        // path.push([11343473.80119741, 5817520.957381047]);
        //
        // map.plugin("AMap.DragRoute", function () {
        //   route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
        //   // route.search(); //查询导航路径并开启拖拽导航
        //
        //   route.on('complete', function () {
        //   })
        // });
        //创建天气查询实例
        weather = new AMap.Weather();

        map.plugin('AMap.Driving', function() {
          driving = new AMap.Driving({
            map: map,
          })
          //
        })





        // map.on('click', this.showInfoClick);
        map.on('mousemove', this.showInfoMove);

// 移除已创建的 marker
//         map.remove(marker);
//         map.plugin('AMap.Driving')
//         this.addMarker(AMap)

      }).catch(e => {
        console.log(e);
      });
    },
    showInfoMove(e){
      // console.log("移动",e)
      // this.openInfo(e)

    },
    showInfoClick(e) {
      this.openInfo(e)
    },
    //在指定位置打开信息窗体
    openInfo(e) {

      AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })

        var lnglat = [e.lnglat.getLng(),e.lnglat.getLat()]

        geocoder.getAddress(lnglat, function(status, result) {
          console.log(status)
          console.log(result)
          if (status === 'complete' && result.info === 'OK') {
            // result为对应的地理位置详细信息
            //执行实时天气信息查询
            weather.getLive(result.regeocode.addressComponent.city, function (err, data) {
              console.log(err, data);
              //构建信息窗体中显示的内容
              var info = [];
              info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
              info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>"+ result.regeocode.addressComponent.city +"</h4>");
              info.push("<p class='input-item'>天气:"+data.weather+"</p>");
              info.push("<p class='input-item'>温度:"+data.temperature+"℃</p></div></div>");

              infoWindow = new AMap.InfoWindow({
                content: info.join("")  //使用默认信息窗体框样式，显示信息内容
              });

              infoWindow.open(map, [e.lnglat.getLng(),e.lnglat.getLat()]);

            });




          }
        })
      })
    },
    switchDriving(index){
      let lngLatStart = this.options[index].lngLatStart
      let lngLatEnd = this.options[index].lngLatEnd
      this.switchValue = this.options[index].label
      // 根据起终点经纬度规划驾车导航路线
      driving.search(lngLatStart,lngLatEnd, function(status, result) {
      });

      // 实例化信息窗体
      var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
        content = [];
      content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
      content.push("电话：010-64733333");
      content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
      var infoWindow1 = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: this.createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
      });
      map.plugin('AMap.Marker', function() {
        marker = new AMap.Marker({
          map: map,
          icon: new AMap.Icon({
            image: '/img/jy.png',
            size: new AMap.Size(25, 25),  //图标所处区域大小
            imageSize: new AMap.Size(25,25) //图标大小
          }),
          position: [114.850865,40.705651],
        });
        //鼠标点击marker弹出自定义的信息窗体
        console.log(AMap.Event)
        AMap.Event.addListener(marker, 'click', function () {
          infoWindow1.open(map, marker.getPosition());
        });
      })


    },
    createInfoWindow(title, content) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("img");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      // closeX.onclick = closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = 'white';
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      var bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = 'relative';
      bottom.style.top = '0px';
      bottom.style.margin = '0 auto';
      var sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    }
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style lang="scss">
//.amap-markers .amap-icon{
//  background-image: url(https://a.amap.com/jsapi/static/image/plugin/marker/start.png);
//  cursor: pointer;
//}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #F9F9F9;
  border-bottom: 1px solid #CCC;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}
</style>