定位调用高德地图接口

流程

1. 高德开放平台注册应用，选择web端接口
2. 根据应用key拼接调用高德地图
3. 构造地图类，构造地点查询类
4. 初始化地图中心（根据经纬度初始化）
5. 使用查询类查询并更新显示地点（根据经纬度定位，搜索包含根据关键字搜索等）

高德接口调用网址参考：

https://lbs.amap.com/api/webservice/guide/api/search

代码：

index.html中添加地图样式并构造类

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e50a95d04b154b2f3a64f81c0b4d753f"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
    });
</script>



map.vue中：

<template>
    <div>
      <div>
        <input type="text" v-model="address" placeholder="请输入地址定位">
        <button type="submit" @click="go">定位</button>
      </div>
      <div id="container" style="width:800px; height: 500px; margin-left: 300px"></div>

    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "map",
        data:function () {
            return{
            //初始化查询地点
                address:'',
                //初始化查询结果列表
                search_result:''
            }
        },
        mounted() {
        	//实例化地图类
            var map = new AMap.Map('container');
            map.setZoom(10);              //setzoom 指定缩放级别
            map.setCenter([116.39,39.9]);  //指定地图中心
        },
        methods:{
            go:function() {
                let search_result=[]
                var placeSearch = new AMap.PlaceSearch({
                  pageSize: 5, // 单页显示结果条数
                  pageIndex: 3, // 页码
                  // city: "010", // 兴趣点城市
                  // citylimit: true,  //是否强制限制在设置的城市内搜索
                  map: map, // 展现结果的地图实例
                  panel: "panel", // 结果列表将在此容器中进行展示。
                  autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
              });
              //关键字查询
              placeSearch.search(this.address, function (status, result){
                  search_result=result.poiList.pois
                  console.log(search_result)
                  var lng=result.poiList.pois[0].location['lng']
                  var lat=result.poiList.pois[0].location['lat']
                  //切换地图中心
                  var map = new AMap.Map('container');
                  map.setZoom(14);              //setzoom 指定缩放级别
                  map.setCenter([lng,lat]);
              });

            }
        }
    }
</script>

<style scoped>

</style>