爬坑之路---Google map

google.maps.event.adddDomListen(window, 'load', callback);
当文档流中所有的dom加载完成后，执行回调函数，可以不用在script中使用defer和async的模式
<script defer async
src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false">
</script>

动态的加载script标签

window.onload = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.url = url;
//在url中定义参数，决定是否需要回调，&callback=funcName
document.body.appendChild(script);
}

初始化地图
定义地图属性

var mapPro = {
center: {lat: number, lng: number} || google.maps.LatLng(number, number),
zoom: number,
mapType: '地图类型'
}

center 地图中心点位置经纬度数据类型为数值（不能填写字符串）两种格式{lat: number, lng: number} google.maps.LatLng(number, number)
zoom 放大的倍数
mapType 地图的类型四种基本格式 Google.maps.MapTypeId.type type {'街道透明层': HYBRID, '普通街道': ROADMAP, '卫星地图': SATELLITE, '具有自然特征': TERRAIN}

坑记录： not a LatLng or LatLngLiteral: in property lat: not a number 类似于center的数据一定是要number的
initMap is not a function 定义于请求google map的参数回调函数没有定义造成

google map marker : new google.maps.Marker({position: '位置，需要center格式的number数据', map: map, icon: '一个图片'}),多点标记使用循环实现，一个new google.maps.Marker实例是一个点,icon 定义图标

map 指向 map初始化实例

坑记录：标记不显示，没有报任何错。 --参数名字打错，注意参数名字

扫描二维码关注公众号，回复： 1452992 查看本文章

google map polyline： new google.maps.Polyline({path, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity, editable})

path: 坐标点集合，数据和上述坐标的数据格式一致
strokeColor: 路径线的颜色
strokeOpacity: 路径线的透明度
strokeOpacity: 路径线的粗细程度
fillColor: 填充的颜色
fillOpacity: 填充的透明度
editable: bool，路径的线是否可编辑

google map cicle: new google.maps.Circle({center, radius, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity, editable})

google map info: new google.maps.InfoWindow({conent})
消息窗口一般和marker一起使用
infoWindow.open(map, marker);

爬坑之路---Google map

猜你喜欢