vue接入高德地图

使用 JSAPI 安全模式,代理服务请以_AMapService 作为一级路由

index.html

html 复制代码
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      serviceHost: "http://xx.xx.xx.xx:8223/_AMapService"
    };
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的高德key"></script>

nginx配置

Nginx 复制代码
	# 前端服务
     server {
         listen       8223;
         server_name  8223;
         charset utf-8;
 
		  location / {
                 root   /root/qianduan/前端代码;
                 try_files $uri $uri/ /index.html;
                 index  index.html index.htm;
                 add_header Access-Control-Allow-Origin *;
         }

        location /_AMapService/v4/map/styles {
             set $args "$args&jscode=你自己的安全密钥";
             proxy_pass http://webapi.amap.com/v4/map/styles;
         }
 
         # 海外地图服务代理
         location /_AMapService/v3/vectormap {
             set $args "$args&jscode=你自己的安全密钥";
             proxy_pass http://fmap01.amap.com/v3/vectormap;
         }
 
         # Web服务API 代理
         location /_AMapService/ {
             set $args "$args&jscode=你自己的安全密钥";
             proxy_pass http://restapi.amap.com/;
         }
   }

使用

js 复制代码
	new AMap.Map('mapContainer', {
      zoom: 10,
      center: [108.931284, 34.382289]
    })
相关推荐
渣哥14 小时前
数据一致性全靠它!Spring 事务传播行为没搞懂=大坑
javascript·后端·面试
云中雾丽14 小时前
Flutter中路由配置的各种方案
前端
不一样的少年_14 小时前
女朋友炸了:刚打开的网页怎么又没了?我反手甩出一键恢复按钮!
前端·javascript·浏览器
Renounce14 小时前
【Android】让 Android 界面 “动” 起来:动画知识点大起底
前端
Asort14 小时前
JavaScript设计模式(十四)——命令模式:解耦请求发送者与接收者
前端·javascript·设计模式
小茴香35314 小时前
Vue 脚手架(Vue CLI)
前端·javascript·vue.js
午安~婉14 小时前
ESLint
前端·eslint·检查
“抚琴”的人14 小时前
C#中获取程序执行时间
服务器·前端·c#
掘金一周14 小时前
Flex 布局下文字省略不生效?原因其实很简单| 掘金一周 10.16
前端
你的电影很有趣14 小时前
lesson72:Node.js 安全实战:Crypto-Js 4.2.0 与 Express 加密体系构建指南
javascript·安全·node.js