在vue移动端中使用高德地图，点击按钮实现打开高德APP，点击到这里去

在vue移动端中使用高德地图，点击按钮实现打开高德APP，点击到这里去

效果图


html文件中引入高德地图秘钥
秘钥获取方法，先注册成为高德地图开发者

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你得秘钥"></script>

在模板中使用

<template>
  <div class="hello">
    <div class="hearder">我的地址</div>
    <div id="container" ></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      workAddr:'昌平区沙河医院',
      mapLng:0,
      mapLat:0
    }
  },
  mounted() {
    this.getMap()
  },
  methods: {
    getMap() {
      // 获取地理编码
      var that = this
      AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })
        geocoder.getLocation(that.workAddr, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            var mapLng = result.geocodes[0].location.lng
            var mapLat = result.geocodes[0].location.lat
            var map = new AMap.Map('container', {
              zoom: 18,
              center: [mapLng, mapLat]
            });
            var marker = new AMap.Marker({
              map: map,
              position: [mapLng, mapLat],
              label: {
                offset: new AMap.Pixel(20, 20),
                content: '点击打开高德地图'
              }
            })
            marker.on('click', function(e) {
              marker.markOnAMAP({
                name: that.workAddr,
                position: marker.getPosition()
              })
            })
            if (AMap.UA.mobile) {
              // document.getElementsByClassName('info')[0].style.display='none';
            }
          }
        })
      })   
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#container{
  height: 100Vh;
  position: relative;
}
.hearder{
  position: absolute;
  z-index: 1;
  height: 45px;
  background: #fff;
  color: #000;
  width: 100%;
  font-size: 24px;
  line-height: 45px;
}
</style>