setCenter与数组值 - 谷歌地图API [英] setCenter with array values - Google Maps API
本文介绍了setCenter与数组值 - 谷歌地图API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用setCenter一个HTML菜单中的Javascript多维数组的值。
HTML菜单示例
＆LT;李＆GT;＆LT; A的onclick =map.setCenter（cityList [0] [1]，cityList [0] [2]）;返回false＆GT;＆LT;脚本＆GT;文件撰写（cityList [0] [0]）;＆下; /脚本＆GT; ＆LT; / A＆GT;＆LT; /李＆GT;
的JavaScript
VAR cityList = [
['亚特兰大'，33.840644，-84.238972，1]，
['奥斯汀，德克萨斯州，30.402887，-97.721606，2]
['波士顿'，42.364247，-71.078575，3]
['伊利诺伊州芝加哥，41.898111，-87.638394，4]
];
我也试图与一个自定义控制，但得到了同样的结果：
google.maps.event.addDomListener（btnAtl，'点击'，功能（）{
map.setCenter（cityList [0] [1]，cityList [0] [2]）
}）;
控制台错误
未捕获InvalidValueError：setCenter：不是经纬度或LatLngLiteral：不是一个对象
解决方案
google.maps.Map.setCenter需要 google.maps.LatLng 或 LatLngLiteral 作为参数。</ p>
这应该工作：
＆LT;立GT;＆LT; A的onclick =map.setCenter（新google.maps.LatLng（cityList [0] [1]，cityList [0] [2]）） ;返回false＆GT;＆LT;脚本＆GT;的document.write（cityList [0] [0]）;＆LT; / SCRIPT＆GT; ＆LT; / A＆GT;＆LT; /李＆GT;
工作code片断：
\r
\r\r
\r VAR地图;\r
VAR cityList = [\r
['亚特兰大'，33.840644，-84.238972，1，文本0]，\r
['奥斯汀，德克萨斯州，30.402887，-97.721606，2，文1]，\r
['波士顿'，42.364247，-71.078575，3，文2]，\r
['芝加哥，伊利诺伊'，41.898111，-87.638394; 4，文3]\r
];\r
\r
函数初始化（）{\r
VAR的MapOptions = {\r
变焦：6，\r
中心：新google.maps.LatLng（46.8，1.7），\r
mapTypeId设为：google.maps.MapTypeId.ROADMAP\r
}\r
\r
地图=新google.maps.Map（的document.getElementById（'map_canvas提供'）的MapOptions）;\r
\r
setMarkers（地图，cityList）;\r
}\r
\r
功能setMarkers（地图，位置）{\r
VAR边界=新的google.maps.LatLngBounds（）;\r
VAR图像='http://maps.google.com/mapfiles/ms/icons/blue.png';\r
对于（VAR I = 0; I＆LT; locations.length;我++）{\r
VAR城市=位置[I]\r
VAR myLatLng =新google.maps.LatLng（市[1]，城市[2]）;\r
bounds.extend（myLatLng）;\r
VAR信息窗口=新google.maps.InfoWindow（）;\r
VAR的标记=新google.maps.Marker（{\r
位置：myLatLng，\r
地图：地图，\r
图标：图像\r
}）;\r
的document.getElementById（'边栏'）的innerHTML + ='＆LT;立GT;＆LT; A的onclick =map.setCenter（新google.maps.LatLng（'+城市[1] +'，'+城市[2] + '））;返回false＆GT;' +城市[0] +'＆LT; / A＆GT;＆LT; /李＆GT;';\r
\r
（函数（ⅰ）{\r
google.maps.event.addListener（标记，点击功能（）{\r
VAR老佛爷=位置[I]\r
infoWindow.close（）;\r
infoWindow.setContent（\r
＆LT; DIV ID ='boxcontent'＆GT;＆LT; A HREF ='+城市[0] +'＆GT;＆LT;强烈风格=颜色：黑'＆gt;中+老佛爷[0] +＆LT; / STRONG＆GT;＆LT; / A＆GT;＆LT; BR /＆gt;中+城市[4] +＆LT; / DIV＆gt;中）;\r
infoWindow.open（地图，这一点）;\r
}）;\r
}）（一世）;\r
}\r
map.fitBounds（边界）;\r
}\r
\r
google.maps.event.addDomListener（窗口'负荷'，初始化）; \r
HTML，\r
身体，\r
#map_canvas {\r
高度：100％;\r
宽度：100％;\r
保证金：0像素;\r
填充：0像素\r
} \r
＆LT;脚本SRC =https://maps.googleapis.com/maps / API / JS＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;表边框=1的风格=高度：100％;宽度：100％＆GT;\r
＆LT; TR风格=高度：100％;宽度：100％＆GT;\r
＆LT; TD风格=高度：100％;宽度：80％＆GT;\r
＆LT; DIV ID =map_canvas的风格=边界：2px的固体＃3872ac;＆GT;＆LT; / DIV＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD风格=高度：100％;宽度：20％＆GT;\r
＆LT; DIV ID =侧边栏＆GT;＆LT; / DIV＆GT;\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt; \r
I am trying to the values of an Javascript multidimensional array in a HTML menu with setCenter.
HTML Menu Sample
<li><a onclick="map.setCenter(cityList[0][1], cityList[0][2]); return false"><script>document.write(cityList[0][0]);</script> </a></li>
Javascript
var cityList = [
['Atlanta, GA', 33.840644, -84.238972, 1],
['Austin, TX', 30.402887, -97.721606, 2],
['Boston, MA', 42.364247, -71.078575, 3],
['Chicago, IL', 41.898111, -87.638394, 4]
];
I've also tried this with a Custom Control, but got the same result:
google.maps.event.addDomListener(btnAtl, 'click', function() {
map.setCenter(cityList[0][1], cityList[0][2])
});
The Console Error
Uncaught InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object
解决方案
From the documentation.
google.maps.Map.setCenter takes a google.maps.LatLng or a LatLngLiteral as an argument.
This should work:
<li><a onclick="map.setCenter(new google.maps.LatLng(cityList[0][1], cityList[0][2])); return false"><script>document.write(cityList[0][0]);</script> </a></li>
working code snippet:
var map;
var cityList = [
['Atlanta, GA', 33.840644, -84.238972, 1, "text 0"],
['Austin, TX', 30.402887, -97.721606, 2, "text 1"],
['Boston, MA', 42.364247, -71.078575, 3, "text 2"],
['Chicago, IL', 41.898111, -87.638394, 4, "text 3"]
];
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.8, 1.7),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
setMarkers(map, cityList);
}
function setMarkers(map, locations) {
var bounds = new google.maps.LatLngBounds();
var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
for (var i = 0; i < locations.length; i++) {
var city = locations[i];
var myLatLng = new google.maps.LatLng(city[1], city[2]);
bounds.extend(myLatLng);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
document.getElementById('sidebar').innerHTML += '<li><a onclick="map.setCenter(new google.maps.LatLng(' + city[1] + ',' + city[2] + ')); return false">' + city[0] + '</a></li>';
(function(i) {
google.maps.event.addListener(marker, "click", function() {
var galeries = locations[i];
infoWindow.close();
infoWindow.setContent(
"<div id='boxcontent'><a href='" + city[0] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + city[4] + "</div>");
infoWindow.open(map, this);
});
})(i);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<table border="1" style="height:100%; width:100%">
<tr style="height:100%; width:100%">
<td style="height:100%; width:80%">
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
</td>
<td style="height:100%; width:20%">
<div id="sidebar"></div>
</td>
</tr>
</table>
这篇关于setCenter与数组值 - 谷歌地图API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
