谷歌地图正确食用方法（持续更新）

• 在谷歌API中，有一个简易的创建地图的步骤，可以作为参考
  准备
  快速上手

• 方法一：

// public/index.html
// 第一步

 

// 第二步：设置代理
以 Nginx 反向代理为例，参考以下三个location配置，进行反向代理设置，分别对应自定义地图、海外地图、Web服务，其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的“您的安全密钥”六个字替换为您刚刚获取的jscode安全密钥。如果您使用了多个key，需要在代理设置中根据 key来映射不同的安全密钥。

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/;
	}
}

// 第三步: 重启代理
nginx -s reload

• 方法二：

// public/index.html
// 直接引入
 


// home.html






// 注意，index.html中引入的key值，和地图样式的mapStyle必须同属于一个账号下，不然不生效
// 一般的开发流程都是由公司提供key，UI提供mapStyle，但是可能会出现先暂时用自己的key
// 然后UI给出mapStyle的时候，把mapStyle绑定到自己本地就可以了

• NO1：地图点位
  地图点位实现参考

如图所示，这个就是地图点位，在API中，叫做地图覆盖物，他不一定是icon，也可能是圆圈，也可能是某一个区域

// 地图点位实现方式
// home.html
data() {
	return {
		positionData: [
			{ name: '点位1', longitude: 120.339426, latitude: 36.131395 },
			{ name: '点位2', longitude: 120.339274, latitude: 36.131652 }
		]
	}
}

methods: {
	// 绘制点位
	// 一般点位都是一个集合，所以需要遍历
	drawPoint() {
		this.positionData.forEach((item) => { 
	        const maker = new AMap.Marker({
	          position: [item.longitude, item.latitude],
	          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
	          size: [30, 40],
	          zooms: [14, 22],
	          // 偏移量
	          offset: [0, 26],
	        });
        this.map.add(maker);
      });
	}
}