Google地图：显示编码的折线路径

Question

Google地图：显示编码的折线路径

31

好的，我有一个用编码折线表示的多边形。我想把它放在地图上，但是不知道语法怎么写。这是我的代码：

  setRegion = new google.maps.Polyline({
    locations: "}~kvHmzrr@ba\hnc@jiu@r{Zqx~@hjp@pwEhnc@zhu@zflAbxn@fhjBvqHroaAgcnAp}gAeahAtqGkngAinc@_h|@r{Zad\y|_D}_y@swg@ysg@}llBpoZqa{@xrw@~eBaaX}{uAero@uqGadY}nr@`dYs_NquNgbjAf{l@|yh@bfc@}nr@z}q@i|i@zgz@r{ZhjFr}gApob@ff}@laIsen@dgYhdPvbIren@",
    levels: "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB",
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  setRegion.setMap(map);

我使用 Polyline 编码工具创建了它。从同一页中，我获得了如下用法：

编码后的折线将显示在下面的“Encoded Polyline”和“Encoded Levels”字段中。在创建你的google.maps.Polyline时，使用这些值来设置位置和层级

然而，多边形未出现。有人知道出了什么问题吗？

更新

我尝试了这个方法，但是报错信息为：Uncaught TypeError: Cannot read property 'encoding' of undefined。

<!doctype html> 
<html> 
<head> 
<title>Test</title> 
<meta charset="iso-8859-1"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>

<style type="text/css"> 
#map {width:670px;height:600px;}
</style> 
<script type='text/javascript'>
function initialize() {
    var myLatlng = new google.maps.LatLng(51.65905179951626, 7.3835928124999555);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var decodedPath = google.maps.geometry.encoding.decodePath("}~kvHmzrr@ba\hnc@jiu@r{Zqx~@hjp@pwEhnc@zhu@zflAbxn@fhjBvqHroaAgcnAp}gAeahAtqGkngAinc@_h|@r{Zad\y|_D}_y@swg@ysg@}llBpoZqa{@xrw@~eBaaX}{uAero@uqGadY}nr@`dYs_NquNgbjAf{l@|yh@bfc@}nr@z}q@i|i@zgz@r{ZhjFr}gApob@ff}@laIsen@dgYhdPvbIren@");
    var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");

    setRegion = new google.maps.Polyline({
        locations: decodedPath,
        levels: decodedLevels,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    setRegion.setMap(map);

}

function decodeLevels(encodedLevelsString) {
    var decodedLevels = [];

    for (var i = 0; i < encodedLevelsString.length; ++i) {
        var level = encodedLevelsString.charCodeAt(i) - 63;
        decodedLevels.push(level);
    }
    return decodedLevels;
}


</script> 
</head> 


<body onload="initialize()"> 

<div id="map"></div>

</body> 
</html>

- joh-3

4个回答

16

如果你遇到了这个错误：

Uncaught TypeError: Cannot read property 'encoding' of undefined

那么 Geometry 库没有被加载。请在 Google 地图 API 的加载中添加 Geometry 库（&libraries=geometry），例如：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>

- ksiomelo

1

我不知道为什么，但如果您将编码的折线和/或级别存储在变量中（例如折线数组的元素），则需要使用String()函数：

polyLayer = [
[['ynh`IcftoCyq@Ne@ncBds@EEycB'],
 ['PHIHP']],
...
];

...
for (var i = 0; i < polyLayer.length; i++) {
    poly = new google.maps.Polyline({
        ...,
        path: google.maps.geometry.encoding.decodePath(String(polyLayer[i][0])), 
        levels: decodeLevels(String(polyLayer[i][1])), 
        ...
    }); 
    poly.setMap(map);
}

- D K

0

你的选项中有 locations:，而不是 path:！我注意到生成器工具指出要使用 locations，但我认为那是不正确的，因为我也是新手！它似乎与 path 一起使用更有效。

- Luke Barker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Olds · Accepted Answer

google.maps.geometry.encoding.decodePath(encodedPath:string)

http://code.google.com/apis/maps/documentation/javascript/reference.html#encoding

该页面介绍了：

var decodedPath = google.maps.geometry.encoding.decodePath(encodedPolyline);
var decodedLevels = decodeLevels(encodedLevels);

// Decode an encoded levels string into an array of levels.
function decodeLevels(encodedLevelsString) {
  var decodedLevels = [];

  for (var i = 0; i < encodedLevelsString.length; ++i) {
    var level = encodedLevelsString.charCodeAt(i) - 63;
    decodedLevels.push(level);
  }

  return decodedLevels;
}

请确保按照：http://code.google.com/apis/maps/documentation/javascript/basics.html#Libraries 的方式加载几何库。

编码折线的工作范例可在此处查看：http://jsfiddle.net/ryanrolds/ukRsp/