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.15plugins:[], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap)=>{// 存儲AMapthis.map = new AMap.Map("container",{ //設置地圖容器idviewMode:"3D", //是否為3D地圖模式zoom:18, //初始化地圖級別center:[121.444013,31.280784], //初始化地圖中心點位置 });this.mapSearchInit()}).catch(e=>{console.log(e);})},mapSearchInit(){const self=thiswindow.AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'],function(){var autoOptions = {// 城市，默認全國 city: "上海",// 使用聯想輸入的input的idinput: "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>

總結

以上是生活随笔為你收集整理的vue结合高德地图V2.0(JSAPI key搭配代理服务器并携带安全密钥转发)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。