在vue移动端中使用百度地图打开百度APP，实现到这里去

在vue移动端中使用百度地图打开百度APP，实现到这里去

效果图


代码
在html中引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.5&ak=你得秘钥"></script>

在模板中

// An highlighted block
<template>
  <div class="hello">
    <div class="hearder">我的地址</div>
    <div class="allmap" id="allmap"></div>
    <div class="btn"><a :href=location>点击打开地图</a></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      location:'',
      addressMap:'北京市沙河市第一私立学校'
    }
  },
  mounted() {
    this.baiduMap()
  },
  methods: {
    baiduMap () {
      var that = this
      var map = new window.BMap.Map('allmap')
      //创建地址解析器实例
      var myGeo = new BMap.Geocoder();
      let add = '昌平区沙河医院门诊楼'
      myGeo.getPoint(add, function(point){
        console.log(point.lat, point.lng)
        that.location = 'http://api.map.baidu.com/marker?location='+point.lat+','+point.lng+'&title='+add+'&content='+add+'&coordtype=wgs84ll&&output=html&src=webapp.baidu.openAPIdemo'
          if(point){
              map.centerAndZoom(point, 10);
              map.addOverlay(new BMap.Marker(point, {title: that.addressMap}))
          }else{
              alert('您选择的地址没有解析到结果！');
          }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.allmap{
  height: 100Vh;
  position: relative;
}
.hearder{
  position: absolute;
  z-index: 1;
  height: 45px;
  background: #fff;
  color: #000;
  width: 100%;
  font-size: 24px;
  line-height: 45px;
}
.btn{
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: rgb(45, 151, 250);
  border-radius: 50px;
  color: #fff;
  position: absolute;
  bottom: 30px;
  right: 10px;

}
a{
    color: #fff;
    text-decoration:none;
    font-size:14px
  }
</style>