SpringBoot2+Vue2 combate real (quinze) Integração do mapa Gaode

1. Site oficial do mapa:

Gaode Open Platform | Gaode Map API

 2. Documento de desenvolvimento (web js)

 Formalmente integrado:

1. Introduza a tag de script em index.html

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key value que você aplicou"></script>

1. Marca de ponto

Map.vue

<div>
    <div id="container" style="width: 100%;height: calc(100vh - 100)"></div>
  </div>



//页面元素加载完之后引用
  mounted() {
    //创建地图实例
    var map = new AMap.Map("container", {
      zoom: 13,
      center:[116.29537571881102,39.842559532456974],
      resizeEnable:true,
      mayStyle:'amap://styles/whitesmoke'
    })
    var marker = new AMap.Marker({
      //经纬度对象，也可以时经纬度构成的一堆数组[116.39,39.9]
      position: new AMap.LngLat(116.29537571881102, 39.842559532456974),
      title: '北京丰台医院',
    })
    //将创建的点标记添加到已有的地图实例
    map.add(marker);
  },

Clique em evento:

 //页面元素加载完之后引用
  mounted() {
    //创建地图实例
    var map = new AMap.Map('container', {
      zoom: 13,
      center: [116.29537571881102, 39.842559532456974],
    })

    var clickHandler = function(e){
      alert('您在['+e.lnglat.getLng()+','+e.lnglat.getLat()+']的位置点击了地图')
    }
    /*//绑定事件
    map.on('click',clickHandler)*/

    var marker = new AMap.Marker({
      //经纬度对象，也可以时经纬度构成的一堆数组[116.39,39.9]
      position: new AMap.LngLat(116.29537571881102, 39.842559532456974),
      title: '北京丰台医院',
      icon:'//vdata.amap.com/icons/b18/1/2.png',
      /*content:'<div style="font-size: 12px;width: 100px">这是我自定义的内容</div>'*/
    });
    marker.on('click',clickHandler)
    //将创建的点标记添加到已有的地图实例
    map.add(marker);
  },

2. Janela de informações e menu do botão direito

var content = [
    "<div>这是信息窗口</div>"
];


var infoWindow = new AMap.InfoWindow({
      anchor:'top-right',
      //传入dom对象，或者html字符串
      content:content.join("<br>")
    });



 var clickHandler = function(e){
      alert('您在['+e.lnglat.getLng()+','+e.lnglat.getLat()+']的位置点击了地图')

      infoWindow.open(map,map.getCenter())
    }

3. Planejamento de rotas

//path是驾驶导航的起，途径和终点，最多支持16个途径点
    var path = []
    path.push([116.303843,39.983412])
    path.push([116.321354,39.896436])
    path.push([116.407012,39.992093])
    
    map.plugin('AMap.DragRoute',function (){
      var router = new AMap.DragRoute(map,path,AMap.DrivingPolicy.LEAST_FEE)
      //查询导航路径并开启拖拽导航
      router.search()
    })

   var polyLine = new AMap.Polyline({
      path: path,
      strokeWeight:5,
      borderWeight:5,
      strokeStyle:"solid",
      strokeColor:'#DC143C',
      lineJoin:'round'
    })
    map.add(polyLine)

4. Posicionamento

<div id="info"></div>


function showCityInfo() {
  //实例化城市查询类
  var citysearch = new AMap.CitySearch();
  //自动获取用户ip，返回当前城市
  citysearch.getLocalCity(function (status, result) {
    if (status === 'complate' && result.bounds) {
      if (result && result.city && result.bounds) {
        var cityinfo = result.city
        var citybounds = result.bounds
        document.getElementById('info').innerHTML = '您当前所在城市' + cityinfo;
        //地图显示当前城市
        map.setBounds(citybounds)
      }
    } else {
      document.getElementById('info').innerHTML = result.info;
    }
  });
}



showCityInfo()

código completo

<template>
  <div id="container" style="width: 100%;height: calc(100vh - 100)"/>

  <div id="info"></div>
</template>

<script>

var content = [
  "<div style='font-size: :14px;color: red;width: 200px;height: 50px'>这是信息窗口</div>"
];


function showCityInfo() {
  //实例化城市查询类
  var citysearch = new AMap.CitySearch();
  //自动获取用户ip，返回当前城市
  citysearch.getLocalCity(function (status, result) {
    if (status === 'complate' && result.bounds) {
      if (result && result.city && result.bounds) {
        var cityinfo = result.city
        var citybounds = result.bounds
        document.getElementById('info').innerHTML = '您当前所在城市' + cityinfo;
        //地图显示当前城市
        map.setBounds(citybounds)
      }
    } else {
      document.getElementById('info').innerHTML = result.info;
    }
  });
}


export default {
  name: "Map",
  data() {
    return {}
  },

  created() {

  },
  //页面元素加载完之后引用
  mounted() {
    //创建地图实例
    var map = new AMap.Map('container', {
      zoom: 13,
      center: [116.29537571881102, 39.842559532456974],
    })

    var infoWindow = new AMap.InfoWindow({
      anchor: 'top-right',
      //传入dom对象，或者html字符串
      content: content.join("<br>")
    });

    var clickHandler = function (e) {
      alert('您在[' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ']的位置点击了地图')

      infoWindow.open(map, map.getCenter())
    }
    /*//绑定事件
    map.on('click',clickHandler)*/

    var marker = new AMap.Marker({
      //经纬度对象，也可以时经纬度构成的一堆数组[116.39,39.9]
      position: new AMap.LngLat(116.29537571881102, 39.842559532456974),
      title: '北京丰台医院',
      icon: '//vdata.amap.com/icons/b18/1/2.png',
      /*content:'<div style="font-size: 12px;width: 100px">这是我自定义的内容</div>'*/
    });
    marker.on('click', clickHandler)

    //将创建的点标记添加到已有的地图实例
    map.add(marker);


    //path是驾驶导航的起，途径和终点，最多支持16个途径点
    var path = []
    path.push([116.303843, 39.983412])
    path.push([116.321354, 39.896436])
    path.push([116.407012, 39.992093])

    map.plugin('AMap.DragRoute', function () {
      var router = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
      //查询导航路径并开启拖拽导航
      router.search()
    })

    var polyLine = new AMap.Polyline({
      path: path,
      strokeWeight: 5,
      borderWeight: 5,
      strokeStyle: "solid",
      strokeColor: '#DC143C',
      lineJoin: 'round'
    })
    map.add(polyLine)


    showCityInfo()

  },
  methods: {}
}
</script>

<style>

</style>