vue结合高德地图V2.0(JSAPI key搭配代理服务器并携带安全密钥转发)

Nginx服务器代理设置

server {
        listen       80;             #nginx端口设置，可按实际端口修改
        server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改
        
        # 自定义地图服务代理
        location /_AMapService/v4/map/styles {
            set $args "$args&jscode=您的安全密钥";
            proxy_pass https://webapi.amap.com/v4/map/styles;
        }
        # 海外地图服务代理
        location /_AMapService/v3/vectormap {
            set $args "$args&jscode=您的安全密钥";
            proxy_pass https://fmap01.amap.com/v3/vectormap;
        }
        # Web服务API 代理
        location /_AMapService/ {
            set $args "$args&jscode=您的安全密钥";
            proxy_pass https://restapi.amap.com/;
        }
}

main.js

window._AMapSecurityConfig = {
	//将http://1.1.1.1:80替换为实际代理地址
    serviceHost:'http://1.1.1.1:80/_AMapService',  
}

index.vue

<template>
  <div >  
    <el-input id="tipInput" v-model="inputSearchVal" placeholder="请输入搜索名称">
    </el-input>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'mapSearch',
  data() {
    return{
        map:null,
        inputSearchVal: '',
     } 
  },
  // 组件挂载完毕后发送请求
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods:{
    initMap(){
        AMapLoader.load({
            key:"*********",// 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            // 存储AMap
            this.map = new AMap.Map("container",{  //设置地图容器id
            viewMode:"3D",    //是否为3D地图模式
            zoom:18,           //初始化地图级别
            center:[121.444013,31.280784], //初始化地图中心点位置 
            });
            this.mapSearchInit()
        }).catch(e=>{
            console.log(e);
        })
    },
    mapSearchInit(){
      const self=this
      window.AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'],function(){
        var autoOptions = {
          // 城市，默认全国 
          city: "上海",
          // 使用联想输入的input的id
          input: "tipInput"
        }
        var autocomplete= new AMap.AutoComplete(autoOptions)
        var placeSearch = new AMap.PlaceSearch({
          city:'上海',
          map:self.map
        })
        autocomplete.on('select', function(e){
          //TODO 针对选中的poi实现自己的功能
          placeSearch.search(e.poi.name)
        })
      })
    },
  },
};
</script>

<style>
#container {
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;  
}
#tipInput{
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px; 
  box-sizing: border-box;
  z-index: 100;
  padding:0px;
  margin: 0px;
}
</style>