我如何从另一个网页(带有 url)跳转到特定的 LatLong 或我自己创建的 google 地图(v3 JS API)上的标记?
How can i jump from another web page (with an url) to a specific LatLong or to a marker on my self-created google maps (v3 JS API)?
我找到了一个简单的例子,但这只适用于地图和 link 在同一页面上的情况。
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.522387,-0.173501);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker2 = new google.maps.Marker(
{
position: new google.maps.LatLng(51.5262405, -0.074549),
map: map,
title: "my 2nd title"
}
);
google.maps.event.addDomListener(
document.getElementById("marker2"), "click", function() {
map.setCenter(marker2.getPosition());
return false;
}
);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:310px; height:260px"></div>
<a href="#" id="marker2">Second place</a>
</body>
</html>
有没有办法从另一个网站跳到特定位置 (LatLong) 或直接跳到带有 marker.getPosition() 的标记到我自己创建的 GM 地图?
也许有锚点?例如:http://www.example.com/map#marker2
此处示例从 URL jquery get querystring from URL
获取查询值
使用它来插入您的代码并使用
map.setCenter(new gooogle.map.latlng(0,0));
用于将中心地图设置为标记的位置
解析location.hash
得到想要的值
var hash=location.hash.substr(1);
要触发点击,请使用 link 的 ID(例如 #marker2
)。
我建议使用 ID 为可点击 link 的列表以防止滥用:
if(['marker2']//array with IDs of clickable links
.indexOf(hash)>-1){
google.maps.event.trigger( document.getElementById(hash),'click');
}
演示:http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#marker2
对于 latLng,您可以使用逗号分隔的纬度和经度:#52.549,13.425
用逗号分割字符串,验证数字(纬度必须在 -85 到 85 之间,经度必须在 -180 到 180 之间)
验证成功后,根据值创建 LatLng
,并使用 LatLng
作为参数调用 map.setCenter
。
演示:http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#52.549,13.425
完整代码(运行它在initialize
末尾):
(function(h) {
var hash = String(h),
latLng = {};
if (!!hash) {
hash = hash.substr(1);
if (['marker2'] //array with IDs of clickable links
.indexOf(hash) > -1) {
google.maps.event.trigger(document.getElementById(hash), 'click');
} else {
hash = hash.split(',');
if (hash.length == 2) {
[
['lat', 85],
['lng', 180]
].forEach(function(o, i) {
if (!latLng || isNaN(hash[i]) || Math.abs(hash[i]) > o[1]) {
latLng = null;
return;
}
latLng[o[0]] = parseFloat(hash[i]);
if (i === 1) {
map.setCenter(latLng);
}
});
}
}
}
}(location.hash));
我找到了一个简单的例子,但这只适用于地图和 link 在同一页面上的情况。
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.522387,-0.173501);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker2 = new google.maps.Marker(
{
position: new google.maps.LatLng(51.5262405, -0.074549),
map: map,
title: "my 2nd title"
}
);
google.maps.event.addDomListener(
document.getElementById("marker2"), "click", function() {
map.setCenter(marker2.getPosition());
return false;
}
);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:310px; height:260px"></div>
<a href="#" id="marker2">Second place</a>
</body>
</html>
有没有办法从另一个网站跳到特定位置 (LatLong) 或直接跳到带有 marker.getPosition() 的标记到我自己创建的 GM 地图?
也许有锚点?例如:http://www.example.com/map#marker2
此处示例从 URL jquery get querystring from URL
获取查询值使用它来插入您的代码并使用
map.setCenter(new gooogle.map.latlng(0,0));
用于将中心地图设置为标记的位置
解析location.hash
得到想要的值
var hash=location.hash.substr(1);
要触发点击,请使用 link 的 ID(例如 #marker2
)。
我建议使用 ID 为可点击 link 的列表以防止滥用:
if(['marker2']//array with IDs of clickable links
.indexOf(hash)>-1){
google.maps.event.trigger( document.getElementById(hash),'click');
}
演示:http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#marker2
对于 latLng,您可以使用逗号分隔的纬度和经度:#52.549,13.425
用逗号分割字符串,验证数字(纬度必须在 -85 到 85 之间,经度必须在 -180 到 180 之间)
验证成功后,根据值创建 LatLng
,并使用 LatLng
作为参数调用 map.setCenter
。
演示:http://run.plnkr.co/plunks/ia7uUFOuG5L1tzsrayw3/#52.549,13.425
完整代码(运行它在initialize
末尾):
(function(h) {
var hash = String(h),
latLng = {};
if (!!hash) {
hash = hash.substr(1);
if (['marker2'] //array with IDs of clickable links
.indexOf(hash) > -1) {
google.maps.event.trigger(document.getElementById(hash), 'click');
} else {
hash = hash.split(',');
if (hash.length == 2) {
[
['lat', 85],
['lng', 180]
].forEach(function(o, i) {
if (!latLng || isNaN(hash[i]) || Math.abs(hash[i]) > o[1]) {
latLng = null;
return;
}
latLng[o[0]] = parseFloat(hash[i]);
if (i === 1) {
map.setCenter(latLng);
}
});
}
}
}
}(location.hash));