谷歌地图如何快速开发（前端知识在Google地图上显示）

在Google地图上显示“我在这里”【例22.3】本节通过实例来看一下如何在页面上显示一幅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);

「链接」

,