时间就这么来到2020了，世界变化的很快，人也变得很快。
不同的是，人拥有最神奇的记忆，能瞬间穿越时空。。。
虽然那些回忆都在脑中，如梦如幻，但是回忆的感受是真实的。
一段Blog的文字，一段当年的录音，甚至一些熟悉的气味，都能瞬间在脑中构建起特定事件的场景。
回归主题，近期谷歌 Maps JavaScript API 升级到了 V3.0 ，不再支持V2.0版本，对比了国内的百度
和高德，还是喜欢谷歌的地图，颜值高，灵活！
所以，不得不重新翻出原来的代码，一行行升级~
翻着那些MAP V2的代码，一下就穿越回了当年在 CRT显示器前，一遍流着汗，一遍啃着西瓜研究
代码的日子。。。（碳基的存储和计算力都不能跟硅基相比，但是模糊搜索能力和情境重构的能力
完胜硅基！：））
再次回归主题，3.0的代码和语法似乎是比2.0高效了很多，逻辑也更清晰。。。
基本的功能都可以通过阅读helper文档搞定。最终成功升级了页面：
几个关键变化记录下来，以便日后查阅。
[newpage]
上代码 : // *************************
一个最基本的核心语句，就成功构建一张地图了
[code]
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
[/code]
当然，首先要申请一个API Key~
[code]
<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”
async defer></script>
[/code]
//******************************
常用的地图空间参数：
[code]
zoom: 15,
center: myLatlng,
mapTypeId: ‘hybrid’,
mapTypeControl: true,
scaleControl: true,
zoomControl: false,
streetViewControl: false,
fullscreenControl: true,
[/code]
zoom取值范围1~18
center 可以直接输入坐标像这样 center: {lat: -34.397, lng: 150.644}，
或指定一个变量 center: myLatlng,
再去解释这个变量 var myLatlng = {lat: 34.155699, lng: 108.946344};
mapTypeId: ‘hybrid’, 地图模式默认有四种：roadmap, satellite, hybrid, terrain
分别对应的是 普通路网地图、卫星地图、叠加路网的混合地图，以及不常用的terrain 地图。
[newpage]
添加标记、监听器、获取坐标
[code]
var marker = new google.maps.Marker({
position: myLatlng,
draggable:true,
map: map,
});
marker.addListener(‘dragend’, function(mapsMouseEvent) {
infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
infoWindow.setContent(mapsMouseEvent.latLng.toString());
infoWindow.open(map,marker);
});
[/code]
最终以文本信息窗输出坐标 infoWindow.setContent(mapsMouseEvent.latLng.toString());
这里还可以写成content: contentString
然后再去定义 contentString，可以用
等标签，以及链接图片等等……
[code]
var contentString = ‘<div id=”content”>’+
‘<div id=”siteNotice”>’+
‘</div>’+
‘<h1 id=”firstHeading” class=”firstHeading”>Uluru</h1>’+
‘<div id=”bodyContent”>’+
‘<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ‘ +
‘sandstone rock formation in the southern part of the ‘+
‘Northern Territory, central Australia. It lies 335 km (208 mi) ‘+
‘south west of the nearest large town, Alice Springs; 450 km ‘+
‘(280 mi) by road. Kata Tjuta and Uluru are the two major ‘+
‘features of the Uluru – Kata Tjuta National Park. Uluru is ‘+
‘sacred to the Pitjantjatjara and Yankunytjatjara, the ‘+
‘Aboriginal people of the area. It has many springs, waterholes, ‘+
‘rock caves and ancient paintings. Uluru is listed as a World ‘+
‘Heritage Site.</p>’+
‘<p>Attribution: Uluru, <a href=”https://#?title=Uluru&oldid=297882194″>’+
‘https://en.wikipedia.org/w/index.php?title=Uluru</a> ‘+
‘(last visited June 22, 2009).</p>’+
‘</div>’+
‘</div>’;
[/code]
[newpage]
还可以通过document的方式，输出到指定id的表单或文本中。
这里的.toFixed(n)是控制经纬度精度的。
[code]
document.getElementById(“lat”).value = event.latLng.lat().toFixed(n);
document.getElementById(“lng”).value = event.latLng.lng().toFixed(n);
[/code]
还可以简单地通过弹窗来输出坐标：
[code]alert(“Lat=” + lat + “; Lng=” + lng);[/code]
但[emot]cool[/emot]要记得解释变量 lat 和 lng：
[code]
var lat = event.latLng.lat();
var lng = event.latLng.lng();
[/code]