从零开始学google地图API(2)--添加标记

其他 2020-06-25 10:17:51 阅读次数: 0

添加标记
效果如下,就是那个小红点
在这里插入图片描述

<!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函数里面，在外面没用

猜你喜欢

转载自blog.csdn.net/azraelxuemo/article/details/106792874
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022