共计 2801 个字符，预计需要花费 8 分钟才能阅读完成。
最近参与页面插入谷歌地图 API 的项目，因此在此分享下我的学习经验，第一次写，请多担待！
首先，讲下公司的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现 model，展示详细信息以及对应的产品。
加载谷歌 API 并插入页面
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
</body>
</html>并且公司需要我们在地图高度变高时，需要对标签进行统计，正好 Google maps api 中正好有对这一方面进行设计，就是‘Marker Clustering’【标记聚类】
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script>
var locations = [{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
]
// 遍历所有坐标点并添加
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// 添加聚类标签 imagePath：标签图片样式
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
</script>如果需要对聚类标签进行样式修改，可以使用：
map.data.Setstyle(function(){var magitude = featrue.getProperty('map');
return {icon:getCircle(magitude);
}
});
function gitCircle(magitude){
var circle = {
path:google.maps.Symbolpath.CIRCLE,
scale:magnitude,
};
return circle;
}gitCircle() 绘制了一个自定义的圆形，并且回调会 maps 作为自定义标签。
初始化渲染完地图后，需要对地图的交互动作进行监听
自我认为经常用到的动作事件：
- bounds-changed：界面发生变化
- center-changed：中心点发生变化
- click：单击
- dbclick: 双击
- drag: 拖动
- heading-changed: 标题改变
- maptypeid：地图样式改变
- mousemove：在地图中移动
- rightclick: 高度点击
- zoom-changed: 地图高度发生改变
添加事件：
map.addListener('dbclick',function(){})标记点添加事件：
markers.map(function(v){v.addListener('click',function(){})
})删除事件：[removeListener]
并且项目中有一需求，需要对详细地址进行转换为经纬度，因此需要采用 Google Maps Geocoding API 请求接口
将地址信息转换为经纬度：
$.get('https://maps.googleapis.com/maps/api/geocode/json?address=' 地址信息 '&key=YOUR_API_KEY'，(data)=>{latLng = data.results[0].geomety.location
})将经纬度转换为地址信息
$.get('https://maps.googleapis.com/maps/api/geocode/json?latlng= 经度, 纬度 &key=YOUR_API_KEY',=>(data){inWhere = data.plus_code.compound_code})以上是我在一个小项目中主要参考的 google maps API 以及 Google Maps Geocoding API 的地方
具体文档：
google maps API
Google Maps Geocoding API
正文完
发表至： javascript
2019-06-17
