Google Maps JavaScript API 使用小记
最近做了个小项目，内容是一个地图，上面可以显示线路，用户等等的东西。 项目地址在介里~
https://github.com/huihuimoe/starmap 效果是酱紫的~
https://huihuimoe.github.io/starmap/ 酱紫，就接触到了Google Maps
JavaScript API。 不过，在Google官网上已经写得非常详细，也有丰富的Example，我只是把我的几个重要实现记录下来而已呐~ 官网在介里~
https://developers.google.com/maps/documentation/javascript/
引入API库
要想用Google Maps JavaScript API，就要先引入库 首先捏，就要到
https://console.developers.google.com/flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true&pli=1 介里去拿到一个KEY
它看起来像是酱紫的 AIzaSyB2rLgLudyVjKiTcqclS8WJb8S3U5R728g 然后引入库的话就是酱紫的
<script src="https://maps.googleapis.com/maps/api/js?key=你的KEY&callback=initMap" async="" defer="defer"></script>callback是加载完成调用的函数，所以就要记得先定义好initMap函数啦~
创建一个地图
创建地图很简单，只要实例化google.maps.Map类就可以辣，就像这样，在#map1里面加载一个中心为西安，放大倍数为5的地图
var map; function initMap() { map = new google.maps.Map(document.getElementById('map1'), { center: { lat: 34.2596292, lng: 108.6870192 }, // 西安 zoom: 5 }); }
其中center是经纬度，这个经纬度怎么找呢？其实有很多方法哒，譬如在Google地图的URL上会实时显示中心的经纬度信息
但是这样做不方便，因为要手动获取，要是我想把用API地名转换为经纬度的话该怎么办？
使用API获取地址的经纬度
找了一遍参考文档，发现有这样一个类-google.maps.Geocoder，这个类是用来转换地址和经纬度的，简直是我的救星呐Ψ(☆ｗ☆)Ψ
这个怎么用呢？参考这个Example~
var service = new google.maps.Geocoder(); service.geocode({ address: "西安" }, function(result, status) { if (status !== "OK") { console.log("错误!", status); return; } console.log("完成", result); });
返回的是一个JSON数组，像这样
[ { "address_components": [ { "long_name": "西安市", "short_name": "西安市", "types": [ "locality", "political" ] }, { "long_name": "陕西省", "short_name": "陕西省", "types": [ "administrative_area_level_1", "political" ] }, { "long_name": "中国", "short_name": "CN", "types": [ "country", "political" ] } ], "formatted_address": "中国陕西省西安市", "geometry": { "bounds": { "south": 33.6938768, "west": 107.66375289999996, "north": 34.7431038, "east": 109.82243259999996 }, "location": { "lat": 34.341575, "lng": 108.93976999999995 }, "location_type": "APPROXIMATE", "viewport": { "south": 34.0021465, "west": 108.63143919999993, "north": 34.5166142, "east": 109.3029785 } }, "place_id": "ChIJuResIul5YzYRLliUp_1m1IU", "types": [ "locality", "political" ] } ]
那么为了获取经纬度我也是专门写了个函数，大家可以参考下
function getLocation(address) { var service = new google.maps.Geocoder(); service.geocode({ address: address }, function(result, status) { if (status !== "OK") { console.log("错误:", status); //return getLocation(address); return; } return { lat: result[0].geometry.location.lat(), lng: result[0].geometry.location.lng() }; }); }
输出一个经纬度的对象。
标记一个坐标和添加一个信息窗口
然后就是用google.maps.Marker标记出一个点，用
google.maps.InfoWindow创建一个信息窗口，顺便加个click事件，绑定marker的单击事件代码如下
var marker = new google.maps.Marker({ position: { lat: 34.2596292, lng: 108.6870192 }, // 西安 title: "这里什么也没有", map: map }); var infoWindow = new google.maps.InfoWindow({ content: " 灰灰不在这里哟(＾Ｕ＾)ノ~ＹＯ " }); marker.addListener('click', function () { infoWindow.open(map, marker); });
效果是酱紫的
画线
最后就是画线条啦，画线条用到的是google.maps.Polyline这个类，线条默认是实线，当然你可以自定义线条类型，代码如下
var path = [ { lat: 34.2596292, lng: 108.6870192 }, //西安 { lat: 30.651226, lng: 104.07588099999998 } //成都 ]; var line = new google.maps.Polyline({ path: path, strokeColor: "rgb(233,30,99)", strokeOpacity: 1, strokeWeight: 2 }); line.setMap(map);
虚线
var path = [ { lat: 34.2596292, lng: 108.6870192 }, //西安 { lat: 30.267443, lng: 120.15279199999998 } //杭州 ]; var line = new google.maps.Polyline({ path: path, strokeColor: "rgb(233,30,99)", strokeOpacity: 0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 2 }, offset: '0', repeat: '20px' }], }); line.setMap(map);
总结
好啦，我用的API大致就是这几个，我只用到了一些基础的东西，没有仔细自定义，花时间还可以做得更漂亮~ 不过最近事情太多啦，有空的时候再研究下怎么做吧~ 这个坑就算是填完啦，往后有时间再堆一座城堡也不奇怪哈(oﾟ▽ﾟ) おしまい