vue接入高德地图

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

index.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配置

	# 前端服务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/;}}

使用

	new AMap.Map('mapContainer', {zoom: 10,center: [108.931284, 34.382289]})