vue脚手架中使用高德地图（叠加google地图）

index.html中

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=你的key"></script>

gaodeMap.vue

<template>
  <div style="height:100%;width:100%;text-align:left;">
    <div id="container" ref="basicMapbox" :style="mapSize">
    </div>
  </div>
</template>
<script>
import AMap from 'AMap';
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.init()
  },

  watch: {
   
  },
  methods: {
    // 初始化
    init() {
      var googleMapLayer = new AMap.TileLayer({ //图层
        getTileUrl: 'https://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil'
      });
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 10,
        center: this.locationCenter,
        layers: [googleMapLayer] //设置图层
      })


      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.PlaceSearch',
      ], () => {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        this.map.addControl(new AMap.ToolBar());
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        this.map.addControl(new AMap.Scale());

        this.map.addControl(new AMap.PlaceSearch());
      });


       //输入提示
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }


    }
  },
  computed: {
    mapSize() {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight
      }
      return styleObj
    }
  }
}

</script>
<style>
</style>

补充：

//高德地图叠加谷歌地图图层

var google = null;

google = new AMap.TileLayer({
           zIndex:70,
           //图块取图地址
            tileUrl:'https://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil'  
  });
 google.setMap(map);

//高德地图叠加谷歌卫星地图图层

var googleWX= null;

googleWX = new AMap.TileLayer({
           //图块取图地址
           tileUrl:'https://mt{1,2,3,0}.google.cn/maps/vt?lyrs=s@194&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]'
 });
 googleWX.setMap(map); 

//高德地图叠加高德卫星地图图层

var gdWX= null;

gdWX = new AMap.TileLayer({
            //图块取图地址
           tileUrl:'https://webst{01,02,03,04}.is.autonavi.com/appmaptile?style=6&x=[x]&y=[y]&z=[z]'
 });
  gdWX.setMap(map); 

//移除图层

google.setMap(null);

googleWX.setMap(null);

gdWX.setMap(null); 
--------------------- 
作者：松松面包 
来源：CSDN 
原文：https://blog.csdn.net/songsongmianbao/article/details/50716545 
版权声明：本文为博主原创文章，转载请附上博文链接！

最后编辑于：2019.01.02 15:45:49