使用Google Maps API和JQuery文章将标记添加到地图中

对于Google Maps代码，我们可以直接链接到Google服务器：>

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

>传感器= false参数指定我们不想使用传感器（例如GPS定位器）来确定用户的位置。

现在我们有了基本库，我们可以开始构建我们的功能。>

概述脚本

让我们从我们的地图代码的骨架开始：

>我们将所有映射功能包装在称为mymap的JavaScript对象中，这将有助于避免页面上与其他脚本的潜在冲突。该对象包含两个变量和两个函数。地图变量将存储对我们将创建的Google Map对象的引用，并且BONDS变量将存储一个包含我们所有标记的边界框。当我们添加了所有标记之后，当我们想以同一时间可见的方式缩放地图时，这将很有用。

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

>。 现在，对于方法：init将在页面上找到一个元素，并将其初始化为具有给定中心和缩放级别的新的Google地图。同时，placemarkers以XML文件的名称，并将在该文件的坐标数据中加载，以在地图上放置一系列标记。

加载地图

>现在我们已经有了基本的结构，让我们写下我们的init函数：>

>我们使用传递给该方法的参数创建一个对象文字包含一组选项。然后，我们初始化了Google Maps API中定义的两个对象（一个地图和一个latlngbounds），然后将它们分配给我们为此目的提前设置的mymap对象的属性。

>

地图构造函数传递给页面上的地图以及一组选项。我们已经准备好了的选项，但是要检索DOM元素，我们需要将Selector String传递给输入，并使用jQuery $函数在页面上查找项目。因为$返回jQuery对象而不是原始的DOM节点，所以我们需要使用[0]向下钻探：这允许我们访问“裸” dom node。 ll在页面上显示我们的地图，并有一个空的边界框，随时可以在添加标记时扩展。

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

添加标记

说到哪个，让我们看一下placemarkers函数：>

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

此功能更复杂，但是很容易理解。首先，我们调用JQuery的$ .GET方法来执行Ajax获取请求。该方法采用两个参数：要请求的URL（在这种情况下为我们的本地XML文件），并在请求结束时执行回调函数。反过来，该功能将通过对请求的响应传递，在这种情况下，这将是我们的XML。

jQuery对待XML与HTML完全相同，因此我们可以使用$（xml）.find（'marker'）。每个（…）在响应XML中的每个标记元素上循环，并在地图上创建一个标记每个。

>我们获取标记的名称和地址，然后为每个标记创建一个新的latlng对象，我们将其分配到一个点变量。我们将边界框扩展到包括该点，然后在地图上的该位置创建一个标记。

>我们希望每当用户点击这些标记时出现工具提示气泡，并且我们希望它包含位置的名称和地址。 因此，我们需要使用MAPS API Event.Addlistener方法将事件侦听器添加到每个标记中。但是，在这样做之前，我们将创建工具提示本身。在Google Maps API中，这种类型的工具提示称为InfowDindow。因此，我们创建了一个新的InfowDINDOW，并设置了一些HTML，以填充必要的信息。然后，我们添加活动听众。每当单击一个标记时，侦听器都会发射，并设置InfowDindow的内容并打开它，以便在地图上可见。

> 最后，在添加所有标记及其关联的事件处理程序和InfowDondow之后，我们使用MAPS API的FitBounds方法将地图适合标记。 我们需要通过的只是我们一直扩展的范围对象，以包括每个标记。这样，无论地图的放大或放置在哪里，它始终将恢复到理想的变焦级别，其中包括我们所有标记。

>

将它们全部捆绑在一起

>现在我们的代码已经准备就绪，让我们将其付诸实践。我们将使用jQuery的$（'document'）。准备等到加载页面，然后初始化地图，并使用#map selector字符串将其指向页面元素：

>

我们还将单击事件侦听器附加到#Showmarkers按钮。单击该按钮时，我们将带有URL的PlaceMarkers函数调用到我们的XML文件。给它一个旋转，您会在地图上看到一组自定义标记。

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

摘要

>您可能猜到了Google Maps API比什么要多得多我们已经在这里介绍了，因此请务必查看文档，以了解所有可能的东西。如果您喜欢阅读这篇文章，那么您会喜欢学习；从大师那里学习新鲜技能和技术的地方。成员可以立即访问SitePoint的所有电子书和互动在线课程，例如JQuery基础知识。

常见问题（常见问题解答）关于使用jQuery

的Google Maps API

>如何将Google Maps API与jQuery集成？

>将Google Maps API与jQuery集成涉及几个步骤。首先，您需要在HTML文件中包含Google Maps API脚本。然后，您需要在JavaScript文件中初始化地图。您可以使用jQuery选择要显示地图的HTML元素。然后，您可以使用Google Maps API方法根据您的需求自定义地图。请记住用脚本标签中的实际API键替换'your_api_key'。

>如何自定义使用Google Maps API和jQuery显示显示的映射？

Google Map API提供了几个可以自定义的选项地图。您可以设置缩放级别，将地图置于特定位置，然后选择要显示的地图的类型。您还可以将标记，信息窗口和事件侦听器添加到地图中。所有这些自定义都可以在JavaScript文件中进行，在此初始化地图。

如何将标记添加到地图上？

>在地图上添加标记涉及创建Google的新实例.maps.Marker类并指定构造函数中的位置和映射选项。位置选项应为Google.maps.latlng对象，代表标记的地理坐标。地图选项应为google.maps.map对象，代表应显示标记的地图。

>

>如何将信息windows添加到标记中？通过创建google.maps.infowwindow类的新实例并在构造函数中指定内容选项来标记。内容选项应是代表要在信息窗口中显示的HTML内容的字符串。然后，您可以使用Info窗口对象的打开方法在单击标记时显示信息窗口。

>

>如何将事件侦听器添加到标记中？使用Google.maps.event类的AddListener方法添加到标记中。 AddListener方法的第一个参数应该是标记对象，第二个参数应该是事件的名称，第三个参数应是事件发生时要执行的函数。显示的映射的类型？

>可以通过设置映射对象的maptypeid选项来更改显示的映射类型。 maptypeid选项应为以下值之一：google.maps.maptypeid.roadmap，google.maps.maptypeid.satellite，google.maps.maptypeid.hhybrid，或google.maps.maps.maptypeid.terrain.terrain.terrain。

>如何通过设置映射对象的缩放选项来设置地图的缩放级别？缩放选项应为代表缩放级别的数字。数字越高，越近ZOOM。目的。中心选项应为Google.maps.latlng对象，代表位置的地理坐标。

>

>如何获得Google Maps的API键？可从Google Cloud Platform控制台获得。您需要创建一个新项目，启用Google Maps JavaScript API，并创建一个新的API密钥。

我如何处理Google Maps API中的错误？

Google Maps API中的错误使用Google.maps.event类的AddDomListener方法来处理。 AddDomListener方法的第一个参数应该是窗口对象，第二个参数应该是“错误”事件，第三个参数应在发生错误时要执行的函数。

以上是使用Google Maps API和JQuery文章将标记添加到地图中的详细内容。更多信息请关注PHP中文网其他相关文章！