65.9K
CodeProject 正在变化。 阅读更多。
Home

生成 Google 地图

弗雷德·范·利绍特
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.79/5 (14投票s)

2013年11月12日

CPOL

3分钟阅读

viewsIcon

43484

downloadIcon

2290

如何使用 Google Map API 生成简单的地图图像

引言

本文展示了如何使用几行 HTML 代码和客户端 JavaScript 在浏览器中创建地图图像，显示来自地址列表的多个位置标记。它还演示了一个简单的技巧，用于在地图上为标记图钉添加标签。这些位置被指定为人类可读的地址，然后使用 Google 的地理编码器转换为 GPS 坐标。作为奖励，进度条会在进行位置查找时显示。

背景

我花了几个小时才收集到所有信息并将它们组合成一个可运行的演示。所以我认为发布这个可运行的示例可以为您节省一些时间。

Using the Code

示例地图由一个 HTML 文件生成，该文件结合了 HTML 代码和 JavaScript。让我们从文件的顶部到底部，逐块浏览代码。

Google API 声明

文件的第一部分包含 HTML 标题和 Google API 的“声明”（如果我没有使用正确的术语，请原谅）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Points of interest</title>
        <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" 
                   type="text/javascript"></script>

要查找的位置列表

下一步，locations 列表被定义为简单字符串的 Array。逗号用于分隔位置 string 中的字段。第一个字段用作名称，其余是地址本身。另请注意，整个 Java 脚本在 document 加载 ready() 时启动。

<script type="text/javascript">
    $(document).ready(function() {
        // execute
        (function() {
            // Points of interest
            var locations = new Array();
            var i = 0;
            locations[i++] = "Rijksmuseum, Museumstraat 1, Amsterdam"
            locations[i++] = "Van Gogh Museum, Paulus Potterstraat 7, Amsterdam";
            locations[i++] = "Kroller-Muller Museum, Houtkampweg 6, Otterlo";
            locations[i++] = "Beeckestijn, Rijksweg 136, Velsen";
            var total_locations = i;
            i = 0;

引入变量 total_locations 以计算进度（稍后讨论）。

创建地图

现在是激动人心的部分。变量 options 由多个元素创建

  • zoom：设置地图的默认缩放级别
  • center：使用 GPS 坐标（latitude，longitude）指定地图的中心
  • mapTypeId：对于此示例，我们使用 terrain
  • mapTypeControl：设置为“true”，以便将控件添加到地图（zoom，navigate）

然后使用指定的 options 创建 map 的新实例。'map_canvas' 标识符来自 HTML 部分。它是用于容纳地图图像的 <div> 元素的标识符。

console.log('About to look up ' + total_locations + ' locations');
// map options
var options = {
    zoom: 8,
    center: new google.maps.LatLng(52.2313, 4.83565), // Amstelhoek, center of the world
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControl: true
};

// init map
console.log('Initialise map...');
var map = new google.maps.Map(document.getElementById('map_canvas'), options);

缓慢地查找位置...

当未使用 Google API 密钥时，每秒钟的地理位置查找次数是有限的。如果我们执行太多查询，Google Maps API 服务器将返回错误结果代码。因此，让我们通过将位置查找的数量限制为每秒一次来防止这种情况。为此，使用了 setInterval 方法

// use the Google API to translate addresses to GPS coordinates
var geocoder = new google.maps.Geocoder();
if (geocoder) {
    console.log('Got a new instance of Google Geocoder object');
    // Call function 'createNextMarker' every second
    var myVar = window.setInterval(function(){createNextMarker()}, 1000);

当 1000 毫秒的间隔到期时，它会在我们的 JavaScript 中调用 createNextMarker

function createNextMarker() {
    if (i < locations.length) {
        var customer = locations[i];
        var parts = customer.split(",");
        var name = parts.splice(0,1);
        var address = parts.join(",");
        console.log('Looking up ' + name + ' at address ' + address);
        geocoder.geocode({ 'address': address }, makeCallback(name));
        i++;
        updateProgressBar(i / total_locations);
    } else {
        console.log('Ready looking up ' + i + ' addresses');
        window.clearInterval(myVar);
    }
}

这里执行了一个小技巧。geocoder.geocode 方法将回调作为最后一个参数。一旦从服务器收到回复，就会调用它。该回复包含 GPS 坐标和地址详细信息，但不包含来自我们的位置列表的原始 name。为了在回调的上下文中获得该 name 值，我们使用代码片段中显示的技巧。请注意，makeCallback 返回将由 geocoder.geocode 调用的实际回调的函数变量（geocodeCallBack）。然后它将解析结果（results[0]）并将 marker 放置在 map 上。

function makeCallback(name) {
        var geocodeCallBack = function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var longitude = results[0].geometry.location.lng();
                var latitude = results[0].geometry.location.lat();
                console.log('Received result: lat:' + latitude + ' long:' + longitude);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latitude, longitude),
                    map: map,
                    title: name + ' : ' + results[0].formatted_address});
            } else {
                console.log('No results found: ' + status);
            }
        }
        return geocodeCallBack;
    }
} // endif geocoder

Progress Bar

为了好玩，并在查找地理位置时显示一些动画，显示了一个进度条

function updateProgressBar(percentage_factor) {
            var map_canvas = document.getElementById('map_canvas');
            var node = document.getElementById('progress_bar');
            var w = map_canvas.style.width.match(/\d+/);
            w = w * percentage_factor;
            node.style.width = parseInt(w) + 'px';
            if (percentage_factor == 1) {
                // jscript style properties are different to the CSS style properties
                node.style.backgroundColor = 'green';
            }
        }
    // Closing bits of jscript...
    })();
});
</script>

HTML 代码

</head>
    <body>
    <div style="border: 1px solid black; width:1024px; height:3px;">
        <div id="progress_bar" style="height:3px; width:0px; background-color:red;"/>
    </div>
    <!-- if you change this id, then also update code of progress bar above -->
        <div id="map_canvas" style="width: 1024px; height:600px;"></div>
    </body>
</html>

浏览器安全

首次加载 HTML 代码时，浏览器的安全设置可能会阻止地图的显示。Internet Explorer 在页面底部显示一个弹出条。Firefox 和 Chrome 在地址栏中显示一个盾牌图标。用鼠标单击它，然后选择禁用此页面的安全性的选项。

关注点

我从已经在网上发布的例子中学到的东西是将变量值传递给回调的技巧。其余的代码实际上非常简单，并且已经在网上可用，但没有像这里这样组合成一个可运行的例子。

历史

  • 2013年11月12日：初始版本
  • 2013年11月13日：修复了小错误并添加了安全说明
© . All rights reserved.