如何使用JavaScript突出显示Google地图中的区域(城市，州或国家/地区)

本文概述

关于你要做什么的简短说明
重要提示：检索城市, 州或国家/地区的地理坐标
A.绘制多边形
B.绘制KML层
突出国家

尽管在使用Google地图显示地址或相关内容的应用程序上不一定总是需要这样做, 但是某些客户确实希望突出显示某个地区, 城市或国家/地区。在本文中, 我们将介绍两种使用JavaScript突出显示某些城市, 州或国家/地区的方法。

关于你要做什么的简短说明

为此, 你基本上需要在GADM上查找州或国家/地区的坐标。有了它们后, 可以使用Polygon对象在Google Maps上绘制形状, 以提供一个数组, 其中所有坐标基本上都作为要突出显示的地方的边界播放。

重要提示：检索城市, 州或国家/地区的地理坐标

本教程最重要的一点是了解要突出显示的区域的边界边界的地理坐标。使用Google Maps, 你将无法从此工具获取此类信息, 相反, 我们建议你通过GADM实用程序更轻松地获取这些信息。在GADM网站上, 你可以下载有关整个国家的KZM数据, 因此你可以根据需要突出显示国家, 州或城市。

你需要从下载网站下载KZM数据, 并根据需要, 提供3个级别(几乎在所有情况下颜色说明都与之相对应)：

注意

我们将以哥伦比亚作为”国家”来遵循本教程, 并绘制布卡拉曼加市。

0级：对应于整个国家/地区的坐标(红色区域之外)
level1：对应于内部状态的坐标(红色区域内)
等级2：对应于城市, 社区的坐标(蓝色区域内)

GADM上的数据可免费用于学术用途和其他非商业用途。未经事先许可, 不得再分发或用于商业用途。允许使用数据创建用于学术出版的地图。

下载所需的级别(在本例中, 我们拥有的Level2可以从中检索城市的坐标)之后, 你将需要提取KMZ文件的内容(在本例中, 该文件为gadm36_COL_2.kmz)。 WinRar或7zip之类的工具, 你将在其中找到一个KML文件(在我们的示例中为gadm36_COL_2.kml)：

然后, 使用文本编辑器打开kml文件, 你将基本上找到数据的XML结构：

现在, 你要做的就是搜索要在Google地图上突出显示的州或城市。在我们的案例中, 我们正在寻找哥伦比亚美丽的布卡拉曼加市的坐标。搜索文件内容后, 你将找到经度和纬度格式的州/城市坐标(先是lng, 然后是lat)。例如, 根据GADM数据库, 布卡拉曼加市的坐标为(lng和lat)：

-73.077796936035, 7.18019914627087 
-73.0765991210938, 7.17500114440924 
-73.0805969238281, 7.16109991073608 
-73.081199645996, 7.14789915084839 
-73.0748977661132, 7.13860082626343 
-73.0655975341797, 7.13280010223394 
-73.0626983642578, 7.12929916381836 
-73.0673980712889, 7.1263999938966 
-73.0759963989258, 7.10970115661621 
-73.084098815918, 7.10449981689459 
-73.0943984985352, 7.09769916534424 
-73.1088027954102, 7.08269977569586 
-73.1156997680664, 7.07289981842052 
-73.1231994628906, 7.07060003280645 
-73.1300964355469, 7.05680179595953 
-73.1393966674804, 7.05340003967291 
-73.1473999023437, 7.05050086975098 
-73.152099609375, 7.05919981002808 
-73.1601028442383, 7.06330013275158 
-73.1688003540039, 7.06389999389648 
-73.1802978515624, 7.06629991531383 
-73.1843032836913, 7.07320117950451 
-73.1860961914062, 7.08760023117071 
-73.1884002685546, 7.1096010208131 
-73.1815032958984, 7.12750101089489 
-73.1780014038085, 7.15230083465588 
-73.1781005859374, 7.17660093307501 
-73.1763000488281, 7.18930006027233 
-73.1770782470703, 7.19456291198725 
-73.1682968139647, 7.19389915466314 
-73.1636962890624, 7.1995987892152 
-73.1591033935547, 7.20250082016003 
-73.1452026367187, 7.211100101471 
-73.1360015869141, 7.21739912033081 
-73.1261978149414, 7.22079992294312 
-73.1199035644531, 7.22370100021362 
-73.1118011474609, 7.2241997718811 
-73.1078033447265, 7.22540187835699 
-73.1054992675781, 7.22540187835699 
-73.1054992675781, 7.22129917144787 
-73.1048965454102, 7.21269989013683 
-73.1048965454102, 7.20340108871466 
-73.1031036376953, 7.19760084152222 
-73.0973968505859, 7.1911988258363 
-73.0915985107421, 7.18540000915522 
-73.0864028930664, 7.18370008468634 
-73.077796936035, 7.18019914627087

这些是你需要突出显示所需坐标的坐标, 但是有两种方法可以做到, 即在Google地图中使用KmlLayer或Polygon。我们将以两种方式说明如何做到这一点：

A.绘制多边形

如果选择多边形方式, 则需要构建一个坐标数组才能在地图上绘制。你将需要从本文的重点中获取坐标, 然后构建自己的坐标数组, 例如：

// Initialize some map with center at Bucaramanga
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 7.119082288502541, lng: -73.120029012106
    }, zoom: 13, mapTypeId: 'roadmap'
});

// An array with the coordinates of the boundaries of Bucaramanga, extracted manually from the GADM database
var BucaramangaDelimiters = [
    { lng: -73.077796936035, lat: 7.18019914627087 }, { lng: -73.0765991210938, lat: 7.17500114440924 }, { lng: -73.0805969238281, lat: 7.16109991073608 }, { lng: -73.081199645996, lat: 7.14789915084839 }, { lng: -73.0748977661132, lat: 7.13860082626343 }, { lng: -73.0655975341797, lat: 7.13280010223394 }, { lng: -73.0626983642578, lat: 7.12929916381836 }, { lng: -73.0673980712889, lat: 7.1263999938966  }, { lng: -73.0759963989258, lat: 7.10970115661621 }, { lng: -73.084098815918, lat: 7.10449981689459 }, { lng: -73.0943984985352, lat: 7.09769916534424 }, { lng: -73.1088027954102, lat: 7.08269977569586 }, { lng: -73.1156997680664, lat: 7.07289981842052 }, { lng: -73.1231994628906, lat: 7.07060003280645 }, { lng: -73.1300964355469, lat: 7.05680179595953 }, { lng: -73.1393966674804, lat: 7.05340003967291 }, { lng: -73.1473999023437, lat: 7.05050086975098 }, { lng: -73.152099609375, lat: 7.05919981002808 }, { lng: -73.1601028442383, lat: 7.06330013275158 }, { lng: -73.1688003540039, lat: 7.06389999389648 }, { lng: -73.1802978515624, lat: 7.06629991531383 }, { lng: -73.1843032836913, lat: 7.07320117950451 }, { lng: -73.1860961914062, lat: 7.08760023117071 }, { lng: -73.1884002685546, lat: 7.1096010208131  }, { lng: -73.1815032958984, lat: 7.12750101089489 }, { lng: -73.1780014038085, lat: 7.15230083465588 }, { lng: -73.1781005859374, lat: 7.17660093307501 }, { lng: -73.1763000488281, lat: 7.18930006027233 }, { lng: -73.1770782470703, lat: 7.19456291198725 }, { lng: -73.1682968139647, lat: 7.19389915466314 }, { lng: -73.1636962890624, lat: 7.1995987892152  }, { lng: -73.1591033935547, lat: 7.20250082016003 }, { lng: -73.1452026367187, lat: 7.211100101471   }, { lng: -73.1360015869141, lat: 7.21739912033081 }, { lng: -73.1261978149414, lat: 7.22079992294312 }, { lng: -73.1199035644531, lat: 7.22370100021362 }, { lng: -73.1118011474609, lat: 7.2241997718811  }, { lng: -73.1078033447265, lat: 7.22540187835699 }, { lng: -73.1054992675781, lat: 7.22540187835699 }, { lng: -73.1054992675781, lat: 7.22129917144787 }, { lng: -73.1048965454102, lat: 7.21269989013683 }, { lng: -73.1048965454102, lat: 7.20340108871466 }, { lng: -73.1031036376953, lat: 7.19760084152222 }, { lng: -73.0973968505859, lat: 7.1911988258363  }, { lng: -73.0915985107421, lat: 7.18540000915522 }, { lng: -73.0864028930664, lat: 7.18370008468634 }, { lng: -73.077796936035, lat: 7.18019914627087 }
];

// Construct the polygon.
var BucaramangaPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.35
});

// Draw the polygon on the desired map instance
BucaramangaPolygon.setMap(map);

该地图将显示以下地图：

布卡拉曼加Google Maps Polygon Highlight JavaScript

懒惰的把戏

如果你不想手动构建坐标数组, 则可以使用JavaScript使用以下功能从GADM数据的”多几何坐标”节点的内容中自动构建它：

/**
 * Creates an array of coordinates from the content of the MultiGeometryCoordinates node of the GADM database.
 */
function buildCoordinatesArrayFromString(MultiGeometryCoordinates){
    var finalData = [];
    var grouped = MultiGeometryCoordinates.split("\n");

    grouped.forEach(function(item, i){
        let a = item.trim().split(', ');

        finalData.push({
            lng: parseFloat(a[0]), lat: parseFloat(a[1])
        });
    });

    return finalData;
}

然后, 只需按照以下方式将GADM文件中的坐标复制为文字字符串(请注意文字字符串中的换行符)：

let kmlAreaData = `-73.077796936035, 7.18019914627087 
-73.0765991210938, 7.17500114440924 
-73.0805969238281, 7.16109991073608 
-73.081199645996, 7.14789915084839 
-73.0748977661132, 7.13860082626343 
-73.0655975341797, 7.13280010223394 
-73.0626983642578, 7.12929916381836 
-73.0673980712889, 7.1263999938966 
-73.0759963989258, 7.10970115661621 
-73.084098815918, 7.10449981689459 
-73.0943984985352, 7.09769916534424 
-73.1088027954102, 7.08269977569586 
-73.1156997680664, 7.07289981842052 
-73.1231994628906, 7.07060003280645 
-73.1300964355469, 7.05680179595953 
-73.1393966674804, 7.05340003967291 
-73.1473999023437, 7.05050086975098 
-73.152099609375, 7.05919981002808 
-73.1601028442383, 7.06330013275158 
-73.1688003540039, 7.06389999389648 
-73.1802978515624, 7.06629991531383 
-73.1843032836913, 7.07320117950451 
-73.1860961914062, 7.08760023117071 
-73.1884002685546, 7.1096010208131 
-73.1815032958984, 7.12750101089489 
-73.1780014038085, 7.15230083465588 
-73.1781005859374, 7.17660093307501 
-73.1763000488281, 7.18930006027233 
-73.1770782470703, 7.19456291198725 
-73.1682968139647, 7.19389915466314 
-73.1636962890624, 7.1995987892152 
-73.1591033935547, 7.20250082016003 
-73.1452026367187, 7.211100101471 
-73.1360015869141, 7.21739912033081 
-73.1261978149414, 7.22079992294312 
-73.1199035644531, 7.22370100021362 
-73.1118011474609, 7.2241997718811 
-73.1078033447265, 7.22540187835699 
-73.1054992675781, 7.22540187835699 
-73.1054992675781, 7.22129917144787 
-73.1048965454102, 7.21269989013683 
-73.1048965454102, 7.20340108871466 
-73.1031036376953, 7.19760084152222 
-73.0973968505859, 7.1911988258363 
-73.0915985107421, 7.18540000915522 
-73.0864028930664, 7.18370008468634 
-73.077796936035, 7.18019914627087`;

var coordinates = buildCoordinatesArrayFromString(kmlAreaData);

/**
 *  Builds an array with following structure:
    [
        { lng: -73.077796936035, lat: 7.18019914627087 }, { lng: -73.0805969238281, lat: 7.16109991073608 }, ....
    ]
*/
console.log(finalData);

然后, 你可以使用finalData变量绘制坐标, 例如：

// Initialize some map with center at Bucaramanga
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 7.119082288502541, lng: -73.120029012106
    }, zoom: 13, mapTypeId: 'roadmap'
});

let kmlAreaData = `-73.077796936035, 7.18019914627087 
-73.0765991210938, 7.17500114440924 
-73.0805969238281, 7.16109991073608 
-73.081199645996, 7.14789915084839 
-73.0748977661132, 7.13860082626343 
-73.0655975341797, 7.13280010223394 
-73.0626983642578, 7.12929916381836 
-73.0673980712889, 7.1263999938966 
-73.0759963989258, 7.10970115661621 
-73.084098815918, 7.10449981689459 
-73.0943984985352, 7.09769916534424 
-73.1088027954102, 7.08269977569586 
-73.1156997680664, 7.07289981842052 
-73.1231994628906, 7.07060003280645 
-73.1300964355469, 7.05680179595953 
-73.1393966674804, 7.05340003967291 
-73.1473999023437, 7.05050086975098 
-73.152099609375, 7.05919981002808 
-73.1601028442383, 7.06330013275158 
-73.1688003540039, 7.06389999389648 
-73.1802978515624, 7.06629991531383 
-73.1843032836913, 7.07320117950451 
-73.1860961914062, 7.08760023117071 
-73.1884002685546, 7.1096010208131 
-73.1815032958984, 7.12750101089489 
-73.1780014038085, 7.15230083465588 
-73.1781005859374, 7.17660093307501 
-73.1763000488281, 7.18930006027233 
-73.1770782470703, 7.19456291198725 
-73.1682968139647, 7.19389915466314 
-73.1636962890624, 7.1995987892152 
-73.1591033935547, 7.20250082016003 
-73.1452026367187, 7.211100101471 
-73.1360015869141, 7.21739912033081 
-73.1261978149414, 7.22079992294312 
-73.1199035644531, 7.22370100021362 
-73.1118011474609, 7.2241997718811 
-73.1078033447265, 7.22540187835699 
-73.1054992675781, 7.22540187835699 
-73.1054992675781, 7.22129917144787 
-73.1048965454102, 7.21269989013683 
-73.1048965454102, 7.20340108871466 
-73.1031036376953, 7.19760084152222 
-73.0973968505859, 7.1911988258363 
-73.0915985107421, 7.18540000915522 
-73.0864028930664, 7.18370008468634 
-73.077796936035, 7.18019914627087`;

var BucaramangaDelimiters = buildCoordinatesArrayFromString(kmlAreaData);

// Construct the polygon.
var BucaramangaPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.35
});

// Draw the polygon on the desired map instance
BucaramangaPolygon.setMap(map);

但是请注意, 这是一种懒惰的方法, 如果你手动构建阵列, 则看起来会更好。你还可以使用JSON.stringify(finalData), 然后复制创建的数组并将其粘贴到你的代码中, 因此该函数可以是有用的帮助器。

B.绘制KML层

如果不是使用JavaScript在地图上绘制坐标, 而是可以使用KML格式以及通过Google Maps的KmlLayer API绘制其数据。该API的工作方式如下, 你可以使用以下语法在地图上直接绘制一个图层：

var ctaLayer = new google.maps.KmlLayer({
    url: 'http://some-public-domain.com/my-kmlfile.kml', map: map
});

例如, 在我们的情况下, 可以使用以下bucaramanga.kml文件在地图上绘制城市布卡拉曼加的KML结构：

重要的提示

KmlLayer方法是在其服务器上运行的Google的一项公共服务, 这意味着该文件需要在网络上公开, 并且需要在不进行任何身份验证的情况下对其进行访问(它们的服务器需要能够向文件并获取其内容没有任何问题), 否则不会绘制Kml图层。

该文件也必须符合KML, 这意味着文档根目录需要具有架构, 文件夹, 最后需要具有坐标的MultiGeometry容器。你可以在下面看到一个示例, 请注意, 你可以从GADM文件的任何级别提取此类信息, 然后使用所需的数据构建自己的文件。

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document id="root_doc">
            <Schema name="gadm36_COL_2" id="gadm36_COL_2">
                <SimpleField name="NAME_0" type="string"></SimpleField>
                <SimpleField name="NAME_1" type="string"></SimpleField>
                <SimpleField name="NAME_2" type="string"></SimpleField>
            </Schema>
            <Folder>
                    <name>gadm36_COL_2</name>
                    <Placemark>
                    <Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
                    <ExtendedData><SchemaData schemaUrl="#gadm36_COL_2">
                                    <SimpleData name="NAME_0">Colombia</SimpleData>
                                    <SimpleData name="NAME_1">Santander</SimpleData>
                                    <SimpleData name="NAME_2">Bucaramanga</SimpleData>
                    </SchemaData></ExtendedData>
                        <MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>-73.077796936035, 7.18019914627087 -73.0765991210938, 7.17500114440924 -73.0805969238281, 7.16109991073608 -73.081199645996, 7.14789915084839 -73.0748977661132, 7.13860082626343 -73.0655975341797, 7.13280010223394 -73.0626983642578, 7.12929916381836 -73.0673980712889, 7.1263999938966 -73.0759963989258, 7.10970115661621 -73.084098815918, 7.10449981689459 -73.0943984985352, 7.09769916534424 -73.1088027954102, 7.08269977569586 -73.1156997680664, 7.07289981842052 -73.1231994628906, 7.07060003280645 -73.1300964355469, 7.05680179595953 -73.1393966674804, 7.05340003967291 -73.1473999023437, 7.05050086975098 -73.152099609375, 7.05919981002808 -73.1601028442383, 7.06330013275158 -73.1688003540039, 7.06389999389648 -73.1802978515624, 7.06629991531383 -73.1843032836913, 7.07320117950451 -73.1860961914062, 7.08760023117071 -73.1884002685546, 7.1096010208131 -73.1815032958984, 7.12750101089489 -73.1780014038085, 7.15230083465588 -73.1781005859374, 7.17660093307501 -73.1763000488281, 7.18930006027233 -73.1770782470703, 7.19456291198725 -73.1682968139647, 7.19389915466314 -73.1636962890624, 7.1995987892152 -73.1591033935547, 7.20250082016003 -73.1452026367187, 7.211100101471 -73.1360015869141, 7.21739912033081 -73.1261978149414, 7.22079992294312 -73.1199035644531, 7.22370100021362 -73.1118011474609, 7.2241997718811 -73.1078033447265, 7.22540187835699 -73.1054992675781, 7.22540187835699 -73.1054992675781, 7.22129917144787 -73.1048965454102, 7.21269989013683 -73.1048965454102, 7.20340108871466 -73.1031036376953, 7.19760084152222 -73.0973968505859, 7.1911988258363 -73.0915985107421, 7.18540000915522 -73.0864028930664, 7.18370008468634 -73.077796936035, 7.18019914627087</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
                    </Placemark>
            </Folder>
    </Document>
</kml>

现在, 假设我们已将先前带有Bucaramanga坐标的文件托管在Google或任何人均可在http://mydomain.com/bucaramanga.kml所访问的公共服务器上托管, 则可以使用以下代码在地图上绘制图层：

// Initialize some map with center at Bucaramanga
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 7.119082288502541, lng: -73.120029012106
    }, zoom: 13, mapTypeId: 'roadmap'
});

// Draw KML File to highlight the Bucaramanga Area
var ctaLayer = new google.maps.KmlLayer({
    url: 'http://mydomain.com/bucaramanga.kml', map: map
});

这将渲染如下图所示的地图：

突出国家

遵循相同的过程, 但是你可能会知道国家/地区将拥有更多的坐标(其中很多, 因此将坐标构建为对象会非常痛苦, 但这是唯一的方法), 例如在摩纳哥(一个有仅绘制158个坐标)：

注意

我们正在使用辅助方法buildCoordinatesArrayFromString, 因为我们很懒惰在JavaScript中创建坐标数组, 因此我们只提供坐标字符串即可。

// Initialize some map with center at Monaco
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 43.73841760000001, lng: 7.42461579999997
    }, zoom: 13, mapTypeId: 'roadmap'
});

let kmlAreaData = `7.41338348388666, 43.734588623047 
7.43630027771002, 43.750888824463 
7.43923950195318, 43.7490272521972 
7.43958282470709, 43.7492141723633 
7.43958187103277, 43.7481956481934 
7.43985986709589, 43.7481956481934 
7.43985986709589, 43.747917175293 
7.43958187103277, 43.747917175293 
7.43958187103277, 43.7459716796876 
7.43763780593878, 43.7459716796876 
7.43763780593878, 43.7462501525879 
7.43625020980835, 43.7462501525879 
7.43625020980835, 43.7459716796876 
7.43569421768188, 43.7459716796876 
7.43569421768188, 43.7462501525879 
7.43541622161871, 43.7462501525879 
7.43541622161871, 43.7459716796876 
7.43513822555542, 43.7459716796876 
7.43513822555542, 43.7456932067872 
7.43486213684088, 43.7456932067872 
7.43486213684088, 43.745418548584 
7.43430614471436, 43.745418548584 
7.43430614471436, 43.7451400756836 
7.43402814865124, 43.7451400756836 
7.43402814865124, 43.7445831298828 
7.43347215652477, 43.7445831298828 
7.43347215652477, 43.7443046569824 
7.43319416046143, 43.7443046569824 
7.43319416046143, 43.743751525879 
7.43291616439831, 43.743751525879 
7.43291616439831, 43.7431945800782 
7.43264007568354, 43.7431945800782 
7.43263816833496, 43.7429161071778 
7.43208408355707, 43.7429161071778 
7.43208408355707, 43.7423629760743 
7.43152809143078, 43.7423629760743 
7.43152809143078, 43.7418060302735 
7.43125009536749, 43.7418060302735 
7.43125009536749, 43.7415275573731 
7.43097209930431, 43.7415275573731 
7.43097209930431, 43.7412490844728 
7.43125009536749, 43.7412490844728 
7.43125009536749, 43.7409706115724 
7.43097209930431, 43.7409706115724 
7.43097209930431, 43.7406959533691 
7.43069410324097, 43.7406959533691 
7.43069410324097, 43.7390289306641 
7.43041610717785, 43.7390289306641 
7.43041610717785, 43.7379150390625 
7.43014001846313, 43.7379150390625 
7.43014001846313, 43.7376403808595 
7.42902803421015, 43.7376403808595 
7.42902803421015, 43.7373619079591 
7.4279150962829, 43.7373619079591 
7.4279150962829, 43.7370834350587 
7.42763996124268, 43.7370834350587 
7.42763996124268, 43.7365264892579 
7.4273619651795, 43.7365264892579 
7.4273619651795, 43.7362518310547 
7.42676019668579, 43.7362518310547 
7.42374897003185, 43.7362518310547 
7.42374897003185, 43.7359733581544 
7.42347288131708, 43.7359733581544 
7.42347288131708, 43.735694885254 
7.42374897003185, 43.735694885254 
7.42374897003185, 43.7345848083496 
7.42558193206787, 43.7345848083496 
7.42708396911621, 43.7345848083496 
7.42708396911621, 43.7343063354492 
7.4273619651795, 43.7343063354492 
7.4273619651795, 43.7340278625488 
7.42763996124268, 43.7340278625488 
7.42763996124268, 43.7334709167481 
7.4279150962829, 43.7334709167481 
7.4279150962829, 43.7329177856445 
7.42819309234625, 43.7329177856445 
7.42819309234625, 43.7326393127441 
7.42847204208368, 43.7326393127441 
7.42847204208368, 43.7312507629396 
7.42763996124268, 43.7312507629396 
7.42763996124268, 43.7304153442384 
7.42652702331543, 43.7304153442384 
7.42652702331543, 43.7301406860352 
7.42624902725225, 43.7301406860352 
7.42624902725225, 43.7298622131348 
7.42569589614868, 43.7298622131348 
7.42569589614868, 43.7295837402344 
7.4251389503479, 43.7295837402344 
7.4251389503479, 43.729305267334 
7.42458295822144, 43.729305267334 
7.42458295822144, 43.7290267944337 
7.42430496215832, 43.7290267944337 
7.42430496215832, 43.7287483215333 
7.42402696609497, 43.7287483215333 
7.42402696609497, 43.7284736633301 
7.42430496215832, 43.7284736633301 
7.42430496215832, 43.7279167175293 
7.42458295822144, 43.7279167175293 
7.42458295822144, 43.7276382446289 
7.42430496215832, 43.7276382446289 
7.42430496215832, 43.7273597717286 
7.42374897003185, 43.7273597717286 
7.42374897003185, 43.7270851135255 
7.4226388931275, 43.7270851135255 
7.4226388931275, 43.7268066406249 
7.42208290100103, 43.7268066406249 
7.42208290100103, 43.7265281677246 
7.42180490493786, 43.7265281677246 
7.42180490493786, 43.7262496948242 
7.42152690887451, 43.7262496948242 
7.42152690887451, 43.7259712219238 
7.42124891281139, 43.7259712219238 
7.42124891281139, 43.7254180908204 
7.42097282409668, 43.7254180908204 
7.42097282409668, 43.72513961792 
7.42041683197016, 43.72513961792 
7.42041683197016, 43.7248611450196 
7.42013883590704, 43.7248611450196 
7.42013883590704, 43.7245826721193 
7.41986083984369, 43.7245826721193 
7.41986083984369, 43.7243041992189 
7.41958284378057, 43.7243041992189 
7.41958284378057, 43.7240295410157 
7.41902685165411, 43.7240295410157 
7.41902685165411, 43.7237510681153 
7.41874885559093, 43.7237510681153 
7.41874885559093, 43.7234725952149 
7.41847276687622, 43.7234725952149 
7.41847276687622, 43.7231941223145 
7.41819477081305, 43.7231941223145 
7.41819477081305, 43.7229156494141 
7.41791677474976, 43.7229156494141 
7.41791677474976, 43.7226371765137 
7.41763877868658, 43.7226371765137 
7.41763877868658, 43.7229156494141 
7.41486120224005, 43.7229156494141 
7.41486120224005, 43.7237510681153 
7.4145817756654, 43.7237510681153 
7.4145817756654, 43.7240295410157 
7.41430711746216, 43.7240295410157 
7.41430711746216, 43.7243041992189 
7.41365289688116, 43.7243041992189 
7.41562128067011, 43.7257347106935 
7.40952730178844, 43.729866027832 
7.4128274917602, 43.7317237854004 
7.41338348388666, 43.734588623047`;

var MonacoDelimiters = buildCoordinatesArrayFromString(kmlAreaData);

// Construct the polygon.
var MonacoPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters, strokeColor: '#0037FF', strokeOpacity: 0.8, strokeWeight: 3, fillColor: '#0037FF', fillOpacity: 0.35
});

// Draw the polygon on the desired map instance
MonacoPolygon.setMap(map);

这将显示如下地图：

编码愉快！

本文概述

关于你要做什么的简短说明

重要提示：检索城市, 州或国家/地区的地理坐标

注意

A.绘制多边形

懒惰的把戏

B.绘制KML层

重要的提示

突出国家

注意

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

关于你要做什么的简短说明

重要提示：检索城市, 州或国家/地区的地理坐标

注意

A.绘制多边形

懒惰的把戏

B.绘制KML层

重要的提示

突出国家

注意

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发