创建一个链接到自定义谷歌地图中特定位置的URL [英] creating a URL that links to a specific location in a custom google map

问题描述

我一直使用Google地图API完全基于自己的图像创建自定义Google地图，并找到了使标记或HTML div元素在特定地点放大的方法。然而，我想知道是否有任何方法可以创建一个URL链接，直接链接到地图上的位置和缩放级别？

I have been using the google maps API to create a custom google map entirely based on my own images, and have found ways to make markers or HTML div elements zoom in on specific locations. However, I am wondering is there any way to create a URL link that links directly to a location and zoom level on the map?

这个想法是，如果有人想点击不同的链接（从网站外部），则会直接进入指定位置的网站，而不是默认位置。

The idea being that if one were to click on a different link (from outside the site) one would enter the site straight at a specified location, instead of the default location.

我知道这已经可以用链接从原来的谷歌地图（而不是自定义版本），这是可能的API？

I know this is already possible with links taken from the original google maps (as opposed to custom versions), is it possible with the API?

非常感谢

推荐答案

使用当前的API，没有。但是您可以使用 URLON库轻松构建和解析URL中的对象 - 您可以使用它设置您的地图选项。

With the current API, no. But you can use the URLON library to easily build and parse an object in the URL - which you can use to set your map options.

实际上，您使用 URLON.parse（）方法解析网址中的散列。然后使用生成对象中的属性在加载时设置 google.maps.MapOptions 。将它放在一起会产生：

Essentially you use the URLON.parse() method to parse your hash in the URL. Then use the attributes in the generated object to set your google.maps.MapOptions on load. Putting it together will yield:

//remove the # from the hash string, as URLON starts parsing from the underscore
urlMapOptions = URLON.parse(hash.substr(1, hash.length));

var mapOptions = {
    zoom: (urlMapOptions.zoom) ? parseFloat(urlMapOptions.zoom) : 8,
    center: (urlMapOptions.lat && urlMapOptions.long) ? new google.maps.LatLng(parseFloat(urlMapOptions.lat), parseFloat(urlMapOptions.long)) : new google.maps.LatLng(43.7, -79.4),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

以下是地图的链接，默认为多伦多，缩放级别为8： http://svignara.github.io/loadgmapwithlink.html

Here is the link to the map, which defaults to Toronto and a zoom level of 8: http://svignara.github.io/loadgmapwithlink.html

这里是地图的链接，它将中心加载到芝加哥，缩放级别为12： http://svignara.github.io/loadgmapwithlink.html#_lat=41.8819&long=-87.6278&zoom=12

And here is the link to the map, which loads the center to Chicago at a zoom level of 12: http://svignara.github.io/loadgmapwithlink.html#_lat=41.8819&long=-87.6278&zoom=12

链接到github repo： html ， JS a>。

Link to github repo: html, JS.

这篇关于创建一个链接到自定义谷歌地图中特定位置的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！