前端知识_在Google地图上显示“我在这里”

在Google地图上显示“我在这里”

【例22.3】本节通过实例来看一下如何在页面上显示一幅Google地图，并且把用户的当前地理位置标注在地图上面。如果用户的位置发生改变，将把之前在地图上的标记自动更新到新的位置上。

实现的具体步骤如下。

（1）要在页面中使用Google地图，需要使用到Google Map API。使用时首先在页面中导入Google Map API的脚本文件，导入方法如下。

<script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false></script>

（2）设定地图的参数，设定的方法如下。

//设定地图参数，将用户的当前位置的纬度、经度设定为地图的中心点

var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);

var myOptions = {

zoom: 14,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

在本例中，将用户当前位置的纬度、经度设定为页面打开时Google地图的中心点。（3）创建地图，并让其在页面中显示，代码如下。

//创建地图并在“map”div 中显示

var map1;

map1= new google.maps.Map(document.getElementById("map"), myOptions);

本例中将地图显示在“map”的div元素中。（4）在地图上创建标记，代码如下。

（5）设置标注窗口并指定标注窗口中的注释文字，代码如下。

//设定标注窗口，并指定该窗口中的注释文字

var infowindow = new google.maps.InfoWindow({

content: "我在这里!"

});

（6）打开标注窗口，代码如下。

//打开标注窗口

infowindow.open(map1, marker);

https://www.bilibili.com/video/BV1qL411u7eE