index.vue

<template>
  <div>
    <div style="width: 100vw;height: 100vh" id="container"></div>
    <div class="input-card" style='width: 24rem;'>
      <div class="input-item">
        <input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>
        <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
        <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
      </div>
      <div class="input-item">
        <input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
        <input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
      </div>
      <div class="input-item">
        <input id="clear" type="button" class="btn" value="清除" />
        <input id="close" type="button" class="btn" value="关闭绘图" />
      </div>
    </div>
  </div>
</template>
<script>
  import gaodeMap from "utils/gaodeMap.js"
  import {map} from "utils/gaodeMap.js"
  export default {
    data() {
      return {
        map : null
      };
    },
    mounted() {
      let gaoMap = new gaodeMap("石家庄");
      let lnglats = [
        [114.497949,38.121129],
        [114.595972,38.114511],
        [114.443193,37.990963],
        [114.588419,37.969449],
        [114.522668,38.042962],
        [114.383966,38.091548]
      ];
      gaoMap.addMarker(lnglats)
      let path = [
        [
          [114.436698,38.083306],
          [114.57952,38.065468],
          [114.57952,38.002732],
          [114.440131,38.006519],
          [114.436698,38.083306]
        ],
        [
          [114.528708,38.075198],
          [114.530768,38.00165]
        ]
      ]
      gaoMap.addPolyline(path);
      gaoMap.addMouseTool();
      gaoMap.addMapControl();
    }
  };
</script>
<style lang="scss" scoped>
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }

  .input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 2.2rem;
  }
  input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0 0.5rem 0 0;
  }
  .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: transparent;
    background-image: none;
    color: #25A5F7;
    border-color: #25A5F7;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: 1rem;
    -webkit-appearance: button;
    cursor:pointer;
    width: 6rem;
    margin: 0 1rem 0 2rem;
  }

  .btn:hover {
    color: #fff;
    background-color: #25A5F7;
    border-color: #25A5F7
  }
  .input-text{
    width: 4rem;
    margin-right:1rem;
  }
</style>