高德地图api+vue 实现锚点、信息窗体

实现功能：
1、高德地图api+vue 实现锚点、信息窗体
2、点击信息窗体调起高德地图

页面：

<template>
  <div class="hospitalNavigation">
<!--    地图-->
    <div id="mapContainer"></div>
  </div>
</template>

<script>
export default {
  name: "hospitalNavigation",
  data(){
    return{
      show:false,
      hospItem:[],
      marker:null,
    }
  },
  mounted() {
    this.getMap()
  },
  methods:{
    getMap(){
      // 获取地理编码
      let that = this;
      console.log("医院数据",that.hospItem)
      console.log(that.hospItem.Address)
      AMap.plugin('AMap.Geocoder', function() {
        let geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })
        geocoder.getLocation(that.hospItem.Address, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            let mapLng = result.geocodes[0].location.lng
            let mapLat = result.geocodes[0].location.lat

            let map = new AMap.Map('mapContainer', {
              zoom: 18,
              center: [mapLng,mapLat]
            });
            that.marker = new AMap.Marker({
              map: map,
              position: [mapLng,mapLat],
              title: that.hospItem.OrgName,
              icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
              // label: {
              //   offset: new AMap.Pixel(20, 20),
              //   content: '点击打开高德地图'
              // }
            })
            that.marker.on('click', function (e) {
              that.getAddGPS()
            })
            //实例化信息窗体
            let title = `<div style="
                            color:#000;
                            font-weight:bold;
                            font-size: 14px;
                            text-align: left;
                            text-indent:0.2rem;
                            background-color:#F9F9F9;
                            border-top: 1px #C0C0C0 solid;border-right: 1px #C0C0C0 solid;border-left: 1px #C0C0C0 solid;">
                        ${that.hospItem.OrgName}</div>`,
              content = [];
            content.push(`地址：${that.hospItem.Address}`);
            content.push(`电话：${that.hospItem.Tel}`);
            //加一个官网参数
            content.push("<a href='#'>详细信息</a>");
            let infoWindow = new AMap.InfoWindow({
              isCustom: true,  //使用自定义窗体
              content: that.createInfoWindow(title, content.join("<br/>")),
              offset: new AMap.Pixel(16, -17)
            });
            infoWindow.open(map, that.marker.getPosition());
            if (AMap.UA.mobile) {
              // document.getElementsByClassName('info')[0].style.display='none';
            }
          }
        })
      })
    },
    //构建自定义信息窗体
    createInfoWindow(title, content) {
      let that = this;
      let info = document.createElement("div");
      //可以通过下面的方式修改自定义窗体的宽高
      info.style.width = "100%";
      info.style.fontSize="14px"
      info.style.lineHeight="0.6rem"
      // 定义顶部标题
      let top = document.createElement("div");
      let titleD = document.createElement("div");
      // let closeX = document.createElement("img");
      //     top.className = "info-top";
      titleD.innerHTML = title;
      //     closeX.src = "https://webapi.amap.com/images/close2.gif";
      //     closeX.onclick = that.closeInfoWindow;

      top.appendChild(titleD);
      // top.appendChild(closeX);
      info.appendChild(top);
      info.addEventListener("click",function(e){
        that.getAddGPS()
      });
      // 定义中部内容
      let middle = document.createElement("div");
      middle.style.backgroundColor = '#fff';
      middle.style.padding="0.2rem"
      middle.style.textAlign="left"
      middle.style.border="1px #C0C0C0 solid"
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      let bottom = document.createElement("div");
      bottom.style.position = 'relative';
      bottom.style.top = '-1px';
      bottom.style.margin = '0 auto';
      bottom.style.textAlign="center";
      let sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      // sharp.style.border="1px red solid"
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    //点击高德信息窗体调起高德
    getAddGPS(){
      this.marker.markOnAMAP({
        name: this.hospItem.Address,
        position: this.marker.getPosition()
      })
    },

    // //关闭信息窗体
    //  closeInfoWindow() {
    //   map.clearInfoWindow();
    // },
    onshow(index){
      this.images = this.image[index];
      this.show=true;
    }
  },
}
</script>

<style scoped>
#mapContainer{
  margin-bottom: 2rem;
}
.amap-overlay-text-container{
  background: #86C8EA;
  color: #fff;
  font-size: 15px;
  border: 1px #326087 solid;
}
#mapContainer /deep/ .amap-logo,#mapContainer /deep/ .amap-copyright{
  z-index:0;
}

</style>

index.html（全局引入这下面这两个script）:

<script type="text/javascript">
  //地图密钥 必须配合申请的高德key使用才有效
  window._AMapSecurityConfig = {
    securityJsCode:'这里写安全密钥',
  }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的密钥&plugin=AMap.Geocoder"></script>
//plugin写支持的功能模块

效果图：