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.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搭配代理服务器并携带安全密钥转发)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。