添加标记
效果如下,就是那个小红点
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(51.508742,-0.120850),
});
marker.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
创建一个标记
marker.setMap(map);参数是Map()返回的地图对象,marker也是事先定义的Marker属性
MarkerImage
一种表示标记图标或阴影图像的结构
icon:‘1.png’ 1.png是我们要使用的标记图像
MarkerShape
定义标记形状,用于确定标记的可点击区域(类型和底部)
不过一般使用
position:new google.maps.LatLng(51.508742,-0.120850)来确定标记的位置
Animation
指定可以在标记上播放的动画(反弹或下降),默认是静止不动的
animation:google.maps.Animation.BOUNCE(跳动的动画)
看具体的代码部分,跟刚才的代码相比,就多了一下部分
var marker=new google.maps.Marker({
position:new google.maps.LatLng(51.508742,-0.120850),
});
marker.setMap(map);
marker就是那个小红点,默认使用 G_DEFAULT_ICON(您也可以指定自定义图标)
GMarker 构造函数将 GLatLng(经纬度)和 GMarkerOptions(标记选项类)(可选)对象作为参数
然后通过setMap() 方法在地图上添加标记
由于默认标记是静止不动的,我们也可以修改一下,上下跳动的标记,这个由于是动画我就不方便展示啦
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(51.508742,-0.120850),
animation:google.maps.Animation.BOUNCE//多了一个animation动画效果,跳动
});
marker.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
除了刚才那种傻fufu的上下跳动动画,也可以修改这个标记的图标
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(51.508742,-0.120850),
icon:'1.png'//多了一个这个部分...默认和html在一个页面下
});
marker.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
还可以在标记上面显示一个信息框
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(51.508742,-0.120850),
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
InfoWindow
创建一个消息窗口
跟最开始的区别就是多了下面内容
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
infowindow就是map里面定义的信息框,里面参数就是内容,任意发挥,通过infowindow.open(map,marker);指定信息框所在的位置,一般就是在marker上面
除了刚才那种标记,还可以添加下面这种折线标记,用来记录行程什么的
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Polyline
创建折线(包含路径和描边样式),可在地图上创建线性叠加层,GPolyline 包括一系列点,并创建一系列有序连接这些点的线段
具有以下属性
path - 指定了多个直线的纬度/经度坐标
strokeColor - 指定直线的十六进制颜色值(格式: “#FFFFFF”)可在之前的html教学里面查看跟css保持一致
strokeOpacity - 指定直线的透明度(该值为 0.0 到 1.0)
strokeWeight - 定义线的宽度,以像素为单位
editable - 定义用户是否可编辑直线(true/false)
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);//定义3个地方的经纬度
function initialize()
{
var myTrip=[stavanger,amsterdam,london];//定义刚才的path,array格式
var flightPath=new google.maps.Polyline({
path:myTrip,//path
strokeColor:"#FFFFFF",//颜色
strokeOpacity:0.8,//透明度
strokeWeight:2//宽度
});
flightPath.setMap(map);//最后通过调用setMap这个古老的函数实现
};
刚才标记是marker.setMap(map),这个是flightPath.setMap(map);折线和标记的最后实现都是通过调用setMap
除了折线,还可以是区域
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london,stavanger];//区别地方,需要闭环
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",//多了两个属性设置
fillOpacity:0.4
});
flightPath.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Polygon
创建一个多边形(包含路径和描边+填充样式),类似于 GPolyline 对象,因为它们都包括一系列有序的点。但是,多边形不像折线一样有两个端点,而是设计为定义形成闭环的区域,所有在path定义里有区别,这个需要闭环
支持以下属性:
path - 指定多个直线纬度的坐标 (第一个和最后一个坐标是相等的)//为了形成闭环
strokeColor - 指定直线的十六进制颜色值(格式: “#FFFFFF”)
strokeOpacity -指定直线的透明度(该值为 0.0 到 1.0)
strokeWeight - 定义线的宽度,以像素为单位。
fillColor - 指定闭合区域的十六进制颜色值 (格式: “#FFFFFF”)//可以不同
fillOpacity - 指定填充颜色的透明度 (该值为 0.0 到 1.0)
editable - 定义用户是否可编辑直线(true/false)
还可以画个圆
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(51.508742,-0.120850),//这个不需要刚才那种路径,可以直接定义一个中心就好
radius:20000,//半径
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",//和刚才类似的内部属性
fillOpacity:0.4
});
myCity.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Circle
创建一个圆(包含中心+半径和描边+填充样式)
圆支持以下属性:
center - 指定圆的中心点参数 google.maps.LatLng
radius - 指定圆的半径,以米为单位
strokeColor - 指定弧线的十六进制颜色值(格式: “#FFFFFF”)
strokeOpacity - 指定弧线的透明度(该值为 0.0 到 1.0)
strokeWeight -定义线的宽度,以像素为单位。
fillColor - 指定圆的十六进制颜色值填充值 (格式: “#FFFFFF”)
fillOpacity - 指定填充颜色的透明度 (该值为 0.0 到 1.0)
editable 定义用户是否可编辑直线(true/false)
也可以是矩形
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize(){
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 11,
center: {
lat: 33.678,
lng: -116.243
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Rectangle
创建一个矩形(包含边界和边框+填充样式)
strokeColor - 指定弧线的十六进制颜色值(格式: “#FFFFFF”)
strokeOpacity - 指定弧线的透明度(该值为 0.0 到 1.0)
strokeWeight -定义线的宽度,以像素为单位。
fillColor - 指定圆的十六进制颜色值填充值 (格式: “#FFFFFF”)
fillOpacity - 指定填充颜色的透明度 (该值为 0.0 到 1.0)
editable 定义用户是否可编辑直线(true/false)
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}//边界,通过上下左右来框起一个矩形
结合我自己使用的情况还想提醒一下
1.确保自己可以访问google地图,如果进入了页面后发现无法正常使用,检查源码看看google的api正常加载
这种情况就会导致google动画无法正常显示
2.要实现的地图效果要在initalize函数里面,在外面没用