超级会员免费看
谷歌地图的使用与实践
谷歌地图高级功能探索
在使用谷歌地图时，我们会遇到一些有趣的功能和操作。比如，当尝试拖动高级别地图（即最初可见的地图）时，会发现地图无法移动，也就是不可平移。虽然谷歌 API v3 不支持直接禁用平移功能，但它支持在地图中心点每次改变时进行更新。我们可以通过监听 center_changed 事件来实现让地图固定在初始位置的效果，代码如下：
google.maps.event.addListener(mapOut, 'center_changed', function() {
mapOut.panTo(BASE_CENTER);
});
这样，每次地图位置改变时，都会被强制回到初始位置，从而无法移动地图。
地图样式设计
在创建更高级的谷歌地图应用时，我们常常需要创建自定义的地图样式。这在需要突出前景内容而不想让其与背景内容相互干扰时非常有用。下面我们来创建几种样式地图。
操作步骤
- 创建血管样式数组 ：在
init函数中创建aVeinStyle数组，该数组包含了将地图设置为血管样式的所有视觉指南。
var aVeinStyle = [
{
featureType:'water',
elementType: "geometry",
stylers:[{color:'#E398BF'}]
},
{
featureType:'road',
elementType: "geometry",
stylers:[{color:'#C26580'}]
},
{
featureType:'road.arterial',
elementType: "geometry",
stylers:[{color:'#9B2559'}]
},
{
featureType:'road.highway',
elementType: "geometry",
stylers:[{color:'#75000D'}]
},
{
featureType:'landscape.man_made',
elementType: "geometry",
stylers:[{color:'#F2D2E0'}]
},
{
featureType:'poi',
elementType: "geometry",
stylers:[{color:'#C96FB9'}]
},
{
elementType: "labels",
stylers:[{visibility:'off'}]
}
];
- 创建血管样式地图 ：使用
google.maps.StyledMapType创建名为Veins的地图。
var veinStyle = new google.maps.StyledMapType(aVeinStyle,{name: "Veins"});
- 创建公交样式 ：创建公交样式的数组和地图类型。
var aBusStyle = [
{
stylers: [{saturation: -100}]
},
{
featureType:'transit.station.rail',
stylers:[{ saturation: 60},{hue:'#0044ff'},{visibility:'on'}]
}
];
var busStyle = new google.maps.StyledMapType(aBusStyle,{name: "Buses"});
- 设置内部地图的地图类型控制器 ：让地图类型控制器可见，并包含新地图样式的 ID。
var mapIn = new google.maps.Map(document.getElementById("mapIn"),{
center: BASE_CENTER,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
panControl:true,
mapTypeControl:true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'veinStyle', 'busStyle']
}
});
- 添加地图样式信息 ：将地图样式信息添加到
mapIn对象中。
mapIn.mapTypes.set('veinStyle', veinStyle);
mapIn.mapTypes.set('busStyle', busStyle);
- 设置默认地图类型 ：将默认地图类型设置为
busStyle。
mapIn.setMapTypeId('busStyle');
重启 HTML 文件后，在内部地图中会出现一个控制器菜单，可用于在自定义地图类型之间切换。
样式工作原理
谷歌地图的样式设置与 CSS 的工作方式非常相似。设置样式通常有以下几个步骤：首先创建样式规则，然后定义谷歌样式对象（ google.maps.StyledMapType ），最后确定该样式信息适用于哪些地图。样式只能应用于 google.maps.MapTypeId.ROADMAP 类型的地图。
以公交样式为例，其目标是使地图变为黑白，并仅突出显示公共交通站点。
var aBusStyle = [
{
stylers: [{saturation: -100}]
},
{
featureType:'transit.station.rail',
stylers:[{ saturation: 60},{hue:'#0044ff'},{visibility:'on'}]
}
];
var busStyle = new google.maps.StyledMapType(aBusStyle,{name: "Buses"});
样式属性如下：
| 属性 | 描述 |
| ---- | ---- |
| visibility | 字符串值（no, off, 或 simplified），用于添加或移除地图元素，常用于根据提供的信息移除元素中的文本，如标签和细节。 |
| gamma | 数值，范围在 0.01 到 10 之间（默认值为 1.0），控制视图中的光线量。较低的值（低于 1）会使较亮和较暗颜色之间的差异更明显，较高的值（高于 1）会产生更全局的效果，值越大，一切越亮。 |
| hue | 十六进制颜色值，用字符串包裹（如 #222222）。可以想象戴上与提供的十六进制值匹配的有色眼镜，有色玻璃对周围颜色的影响和改变方式就是地图色调颜色的改变方式。 |
| lightness | 值在 -100 到 100 之间（默认值为 0）。如果提供的值低于 0，效果类似于在地图上放置一个黑色矩形并改变其不透明度（例如，-30 相当于 30% 的不透明度）。正值的效果类似，只是使用白色矩形。 |
| saturation | 值在 -100 到 100 之间（默认值为 0）。-100 会使图像变为灰度，接近 100 会去除图像中的所有灰色，使一切更鲜艳。 |
我们可以通过添加过滤逻辑来控制要改变的地图元素。例如：
{elementType: "geometry",
stylers:[{color:'#E398BF'}]
此代码表示只改变所有几何元素的颜色，非几何元素不受影响。元素类型选项有三种： all （默认选项）、 geometry 和 labels 。还可以使用 featureType 属性进行更精确的过滤，例如：
{
featureType:'landscape.man_made',
elementType: "geometry",
stylers:[{color:'#F2D2E0'}]
}
此代码表示同时关注特征类型和元素类型。若去掉 elementType 属性，颜色效果将同时影响几何和标签；若去掉 featureType ，则会影响地图中的所有几何元素。完整的 featureType 属性选项列表可访问 http://goo.gl/H7HSO 。
地图样式与地图的连接
创建好样式后，需要将其连接到地图。如果只有一种样式，可直接将其连接到地图：
inMap.setOptions({styles: styles});
也可以在创建地图时添加样式属性。但样式只能添加到道路地图，若添加到非道路地图则不会生效。当需要添加多种样式选项时，需要列出地图类型。首先创建新的地图类型对象，例如：
var busStyle = new google.maps.StyledMapType(aBusStyle,{name: "Buses"});
然后将地图类型 ID 添加到控制器并使其可见：
var mapIn = new google.maps.Map(document.getElementById("mapIn"),{
center: BASE_CENTER,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
panControl:true,
mapTypeControl:true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'veinStyle', 'busStyle']
}
});
接着将新地图类型与样式对象连接：
mapIn.mapTypes.set('veinStyle', veinStyle);
mapIn.mapTypes.set('busStyle', busStyle);
最后，可将默认地图设置为其中一种样式地图：
mapIn.setMapTypeId('busStyle');
谷歌地图与 Twitter 数据的结合
现在我们来探索如何将 Twitter 数据与谷歌地图结合。目标是创建 Twitter 帖子与谷歌地图之间的链接。通过一系列操作，最终实现一个可点击的谷歌地图，用户点击地图时，会连接到 Twitter API 并搜索该区域包含“HTML5”的推文。搜索结果返回后，会在点击区域弹出一个新标记，并显示该位置关于该主题的最新推文。
操作步骤
- 创建 HTML 文件 ：创建一个新的 HTML 文件
10.01.socielmap.html，并添加以下代码，使用自己的 API 密钥：
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Markers and Events</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100%; width:100%; position:absolute; top:0px; left:0px }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAywwIFJPo67Yd4vZgPz4EUSVu10BLHroE&sensor=true">
</script>
<script src="./10.01.socielmap.js"></script>
</head>
<body onload="init();">
<div id="map"></div>
</body>
</html>
- 创建 JavaScript 文件 ：创建一个新的 JavaScript 文件
10.01.socielmap.js，并将所有代码放在init函数中：
function init(){
//all code here
}
- 设置地图中心点 ：将地图中心点设置为欧洲：
var BASE_CENTER = new google.maps.LatLng(48.516817734860105,13.005318750000015 );
- 创建黑白样式 ：为地图创建黑白样式，方便聚焦即将创建的标记：
var aGray = [
{
stylers: [{saturation: -100}]
}
];
var grayStyle = new google.maps.StyledMapType(aGray,{name: "Black & White"});
- 创建新的谷歌地图 ：
var map = new google.maps.Map(document.getElementById("map"),{
center: BASE_CENTER,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
});
- 设置默认样式 ：将黑白样式设置为默认样式：
map.mapTypes.set('grayStyle', grayStyle);
map.setMapTypeId('grayStyle');
- 创建地图点击事件 ：使用谷歌 API 创建地图的点击事件，点击地图时触发监听函数，开始 Twitter 搜索：
google.maps.event.addListener(map, 'click', function(e) {
var searchKeyWord = 'html5';
var geocode=e.latLng.lat() + "," + e.latLng.lng()+",50km";
var searchLink = 'http://search.twitter.com/search.json?q='+ searchKeyWord+ '&geocode=' + geocode +"&result_type=recent&rpp=1";
$.getJSON(searchLink, function(data) {
showTweet(data.results[0],e.latLng);
});
});
- 显示推文 ：当 Twitter 搜索结果返回时，显示新推文。若未找到推文，显示默认内容：
function showTweet(obj,latLng){
if(!obj) obj = {text:'No tweet found in this area for this topic'};
console.log(obj);
var marker = new google.maps.Marker({
map: map,
position: latLng,
title:obj.text
});
}
工作原理
如今，几乎所有数据都越来越多地与地理位置数据和地图重叠。Twitter 一直在努力获取用户的位置信息，虽然大部分时间位置信息为空，但 Twitter 始终能根据用户信息大致了解其位置，尤其是用户通过手机发推文时。未来，Twitter 结果中的用户位置信息将更加准确。
用户点击地图后，首先构建一个用于 Twitter API 的搜索查询：
google.maps.event.addListener(map, 'click', function(e) {
var searchKeyWord = 'html5';
var geocode=e.latLng.lat() + "," + e.latLng.lng()+",50km";
var searchLink = 'http://search.twitter.com/search.json?q='+ searchKeyWord+ '&geocode=' + geocode +"&result_type=recent&rpp=1";
我们关注两个主要点：搜索查询（这里是 HTML5）和查询位置。从谷歌返回的事件中获取位置信息，并将其格式化为字符串，添加范围（这里设置为 50 公里）。我们希望以 JSON 格式获取搜索结果，因此将 URL 参数发送到 http://search.twitter.com/search.json ，并附加 q 值和 geocode 值。若想深入探索 Twitter 搜索 API 的选项和可能性，可访问 https://dev.twitter.com/docs/api/1/get/search 。
使用 jQuery 的 $.getJSON 函数将信息发送到服务并获取结果：
$.getJSON(searchLink, function(data) {
showTweet(data.results[0],e.latLng);
});
在 showTweet 函数中，首先检查返回的第一个元素是否有数据。若没有，则创建一个包含占位信息的新对象：
if(!obj) obj = {text:'No tweet found in this area for this topic'};
最后创建标记：
var marker = new google.maps.Marker({
map: map,
position: latLng,
title:obj.text
});
需要注意的是，当前 latLng 信息是点击位置，而非推文的准确位置。目前 Twitter 返回的对象中有一个 geo 属性，但在编写本文时，该属性始终为空。未来可检查该属性是否有值，并使用其使标记位置更准确。
通过以上内容，我们深入了解了谷歌地图的高级功能，包括地图样式的设计和与 Twitter 数据的结合。这些技术可以帮助我们创建更具交互性和个性化的地图应用。
谷歌地图的使用与实践
构建高级交互标记
在地图应用中，标记是非常重要的元素，它可以为用户提供特定位置的信息。接下来，我们将探讨如何构建一个高级交互标记。
操作步骤
- 定义标记样式 ：首先，我们需要定义标记的样式，使其更加个性化。以下是一个简单的示例：
var markerIcon = {
url: 'custom-marker.png', // 自定义标记图标
scaledSize: new google.maps.Size(30, 30), // 图标大小
origin: new google.maps.Point(0, 0), // 图标原点
anchor: new google.maps.Point(15, 30) // 图标锚点
};
- 创建标记 ：使用定义好的样式创建标记，并将其添加到地图上。
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng), // 标记位置
map: map, // 关联的地图
icon: markerIcon, // 使用自定义图标
title: 'Custom Marker' // 标记标题
});
- 添加交互事件 ：为标记添加交互事件，例如点击事件，当用户点击标记时，显示详细信息。
google.maps.event.addListener(marker, 'click', function() {
var infoWindow = new google.maps.InfoWindow({
content: '<h3>Marker Details</h3><p>This is a custom marker with detailed information.</p>'
});
infoWindow.open(map, marker);
});
工作原理
通过定义自定义图标，我们可以使标记更加独特和吸引人。 scaledSize 属性用于调整图标的大小， origin 属性指定图标的原点， anchor 属性指定图标在地图上的锚点位置。当用户点击标记时， addListener 函数会监听点击事件，并触发回调函数。在回调函数中，我们创建一个 InfoWindow 对象，用于显示详细信息，并使用 open 方法将其打开在标记上方。
向信息窗口气泡中添加多条推文
在前面的内容中，我们已经实现了在地图上显示单条推文的功能。现在，我们将进一步扩展，向信息窗口气泡中添加多条推文。
操作步骤
- 修改搜索查询 ：在进行 Twitter 搜索时，增加返回结果的数量。
var searchLink = 'http://search.twitter.com/search.json?q=' + searchKeyWord + '&geocode=' + geocode + "&result_type=recent&rpp=5"; // 返回 5 条结果
- 修改显示推文函数 ：修改
showTweet函数，将多条推文添加到信息窗口中。
function showTweet(data, latLng) {
var content = '<h3>Tweets in this area</h3>';
for (var i = 0; i < data.length; i++) {
content += '<p>' + data[i].text + '</p>';
}
var infoWindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
position: latLng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
}
工作原理
通过修改搜索查询中的 rpp 参数，我们可以指定返回的推文数量。在 showTweet 函数中，我们遍历返回的推文数组，将每条推文的文本添加到 content 变量中。然后，创建一个 InfoWindow 对象，并将 content 作为其内容。最后，为标记添加点击事件，当用户点击标记时，打开信息窗口显示多条推文。
自定义标记的外观和感觉
除了前面提到的自定义标记图标，我们还可以进一步自定义标记的外观和感觉，使其更加符合应用的风格。
操作步骤
- 使用 SVG 图标 ：SVG 图标具有良好的可扩展性和兼容性，可以创建高质量的自定义标记。以下是一个使用 SVG 图标的示例：
var svgMarker = {
path: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z',
fillColor: '#FF0000',
fillOpacity: 0.8,
strokeColor: '#000000',
strokeWeight: 2,
scale: 1
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: svgMarker
});
- 动画效果 ：为标记添加动画效果，使其更加生动。
marker.setAnimation(google.maps.Animation.BOUNCE); // 弹跳动画
工作原理
使用 SVG 图标时，我们可以通过 path 属性定义图标的形状， fillColor 和 fillOpacity 属性设置填充颜色和透明度， strokeColor 和 strokeWeight 属性设置边框颜色和宽度。通过 setAnimation 方法，我们可以为标记添加动画效果，例如 BOUNCE 动画会使标记上下弹跳。
最终项目：构建实时行程
在前面的基础上，我们可以构建一个实时行程项目，为用户提供更加丰富的地图体验。
操作步骤
- 数据准备 ：收集行程相关的数据，例如景点、餐厅、酒店等，并将其存储在一个数组中。
var itineraryData = [
{
name: 'Eiffel Tower',
location: new google.maps.LatLng(48.8584, 2.2945),
description: 'The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.'
},
{
name: 'Louvre Museum',
location: new google.maps.LatLng(48.8606, 2.3376),
description: 'The Louvre Museum is the world\'s largest art museum and a historic monument in Paris.'
}
];
- 创建标记和信息窗口 ：遍历行程数据，为每个地点创建标记和信息窗口。
for (var i = 0; i < itineraryData.length; i++) {
var place = itineraryData[i];
var marker = new google.maps.Marker({
position: place.location,
map: map,
title: place.name
});
var infoWindow = new google.maps.InfoWindow({
content: '<h3>' + place.name + '</h3><p>' + place.description + '</p>'
});
google.maps.event.addListener(marker, 'click', (function(marker, infoWindow) {
return function() {
infoWindow.open(map, marker);
};
})(marker, infoWindow));
}
- 路线规划 ：使用谷歌地图的路线规划服务，为用户规划行程路线。
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var request = {
origin: itineraryData[0].location,
destination: itineraryData[itineraryData.length - 1].location,
waypoints: [],
travelMode: google.maps.TravelMode.DRIVING
};
for (var i = 1; i < itineraryData.length - 1; i++) {
request.waypoints.push({
location: itineraryData[i].location,
stopover: true
});
}
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
工作原理
首先，我们准备好行程相关的数据，包括地点名称、位置和描述。然后，遍历数据数组，为每个地点创建标记和信息窗口，并为标记添加点击事件。在路线规划部分，我们使用 DirectionsService 和 DirectionsRenderer 对象，通过 route 方法请求路线规划服务，并将结果显示在地图上。 waypoints 参数用于指定途径点， travelMode 参数指定出行方式。
总结
通过以上内容，我们全面介绍了谷歌地图的高级应用，包括地图样式设计、与 Twitter 数据的结合、高级交互标记的构建、信息窗口中多条推文的显示、标记外观的自定义以及实时行程的构建。这些技术可以帮助开发者创建更加丰富、交互性强的地图应用，为用户提供更好的体验。在实际应用中，我们可以根据具体需求进一步扩展和优化这些功能，例如添加更多的交互事件、优化地图性能等。希望这些内容对大家有所帮助，让我们一起创造出更加出色的地图应用。
以下是一个简单的流程图，展示了构建实时行程的主要步骤：
graph TD;
A[数据准备] --> B[创建标记和信息窗口];
B --> C[路线规划];
同时，为了更清晰地展示不同功能的操作步骤，我们可以总结一个表格：
| 功能 | 操作步骤 |
| ---- | ---- |
| 构建高级交互标记 | 1. 定义标记样式；2. 创建标记；3. 添加交互事件 |
| 向信息窗口气泡中添加多条推文 | 1. 修改搜索查询；2. 修改显示推文函数 |
| 自定义标记的外观和感觉 | 1. 使用 SVG 图标；2. 添加动画效果 |
| 构建实时行程 | 1. 数据准备；2. 创建标记和信息窗口；3. 路线规划 |
通过这些操作步骤和技术，我们可以充分发挥谷歌地图的潜力，为用户带来更加优质的地图体验。
扫一扫
13
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
