灰灰 の blog

灰灰✿喵呼哈哈(>^ω^<)

Google Maps JavaScript API 使用小记

2016.7.5 | 268阅读 | 0条评论 | JavaScript

最近做了个小项目,内容是一个地图,上面可以显示线路,用户等等的东西。 项目地址在介里~
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上会实时显示中心的经纬度信息
截图20160704172959

但是这样做不方便,因为要手动获取,要是我想把用API地名转换为经纬度的话该怎么办?

使用API获取地址的经纬度

找了一遍参考文档,发现有这样一个类-google.maps.Geocoder,这个类是用来转换地址和经纬度的,简直是我的救星呐Ψ(☆w☆)Ψ
这个怎么用呢?参考这个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: " 灰灰不在这里哟(^U^)ノ~YO " 
});
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゚▽゚) おしまい

暂无评论

发表评论

表情