javascript - 地理定位:使用 OpenStreetMap 绘制 map 和 POI-6ren

javascript - 地理定位:使用 OpenStreetMap 绘制 map 和 POI

转载作者：可可西里更新时间：2023-10-31 23:24:10

24

4

我正在制作一个网站，访问者可以在 map 上显示其位置，并且在选定的半径(例如 10 公里)内，访问者可以看到一些 POI(例如餐馆、酒吧)。

到目前为止我有这段代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false">
        </script>
        <script type="text/javascript">
            function init()
            {
                if(navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition (processPosition, handleError);
                }
                else
                {
                    alert("Geolocation not supported in this browser");
                }
            }

            function processPosition(pos)
            {
                var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

                var myOptions = {
                    center: latlng,
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);   

                var marker = new google.maps.Marker({
                    position: latlng, 
                    map: map, 
                    title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)"
                });   
            }

            function handleError(err)
            {
                alert('An error occurred: ' + err.code);
            }

        </script>
    </head>
    <body onload="init()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>

它使用 Google map 在带有标记的 map 上显示我的位置。
问题是，我想使用 OpenStreetMap 中的 map (它们会定期更新并且没有限制)，但不幸的是我还没有设法实现它。

这是我需要的 map :Maps

1. 是否有示例(教程)，显示如何使用他们的 API，如 Google的？
2. OpenStreetMap 是否有兴趣点之类的东西，比如 Google Places ？或者甚至可以将 Google Places 与 OpenStreetMap 的 map 一起使用？

最佳答案

如果你想使用 OpenStreetMap 数据，你应该查看 OpenLayers .这与 Google map 或 Bing map API 的工作方式略有不同:您必须在服务器上安装 OpenLayers JavaScript 库，它负责显示来自各种来源的 map 数据(“ map 图 block ”):OpenStreetMap (OSM)、谷歌地图、您自己的自定义 map 数据等。OpenStreetMap website本身使用 OpenLayers 来显示 map 。

1:有documentation (尽管恐怕不如 Google Maps API 好)和大量 examples ，包括一些单独或与 Google 数据一起使用 OpenStreetMap 数据(在顶部的“过滤器”框中输入“osm”)。

2:至于兴趣点，你可以放置一个"Marker Layer"在 map 上如 this example ，包括可自定义的标记图标和单击图标时出现的气泡，但您必须自己处理 POI 和搜索功能的数据。因此，如果您愿意，您可以自由使用 Google Places API，然后将结果显示为 OpenStreetMap 上的标记 - 只要您 display “Powered by Google” Logo 。

关于javascript - 地理定位:使用 OpenStreetMap 绘制 map 和 POI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9503505/

24

4

0

文章推荐： php - 为什么浏览器要求缓存文件？

文章推荐： angularjs - 如何从 angular.js 中的重定向 URL 捕获和获取值？

文章推荐： node.js - 带有 aws-sdk receiveMessage 的 Amazon SQS

文章推荐： php - PHP 中的命名空间反射

openstreetmap - 具有速度限制的本地提名 openstreetmap
我目前正在 PostGIS 上运行 openstreetmap 的 nominatim map 的本地副本。有什么方法可以将速度限制输入到这个数据库中，这样我也可以返回该信息。我发现在查询 open
openstreetmap - 如何从 OpenStreetMap 数据中找到街道交叉口的列表？
我正在寻找一种从 OpenStreetMap (OSM) 数据中准确检索街道交叉口的方法。我知道有人提出并回答了类似的问题，但我可以从建议的方法中检索到的数据不是很准确。首先，我知道以下问题: ho
openstreetmap - 计算 OpenStreetMap 的边界框
是否可以从坐标(纬度、经度)、缩放级别和大小(屏幕)获取边界框？我只找到了 calculating bounding box from tile .我需要它，因为 OpenStreetMap 只接受导
openstreetmap - 使用 OpenStreetMap 反向定位
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 11 年前关闭。 Improve this
openstreetmap - openstreetmap 的高程 API
是否有任何用于openstreetmap 的高程API，就像我们为谷歌地图提供的那样？在谷歌高程 API 中，我们可以传递坐标并获得高程作为响应。最佳答案我最近发表了Open-Elevation
openstreetmap - 如何在 OpenStreetMap 中获取给定位置周围的所有道路？
无法弄清楚如何在给定位置获取特定半径的所有道路。我当前的查询是我尝试添加类似 primary,secondary,tertiary,residential 的内容但它
openstreetmap - 从 OpenStreetMap 获取地点/街道等列表？
给定纬度/经度组合以及从该点开始的半径(以公里为单位，如果有区别的话)，是否有人知道我可以用来获取所有地点列表的服务/API(甚至下载) ，街道等来自提供的纬度/经度的圆圈内？当我说所有的地方时，我对
openstreetmap - 如何在我的 Web 应用程序中包含 OpenStreetMap
嗯，我正在寻找一个教程，告诉我如何在我的网络应用程序中包含 OpenStreetMap。 Google 提供了一个很好的教程，告诉我们如何在我们的网络应用程序中包含 Google Map 的分步过程。
openstreetmap - Openstreetmap API - Openlayers/MapQuest
我试图理解什么是什么，但我有点困惑: OpenStreetMap 可免费使用 map 。此 map 可能的 API 是: -OpenLayer -MapQuest 为什么 OpenLayer 在 Op
openstreetmap - 使用 OpenStreetMap 获取一组给定 GPS 坐标的国家名称
有人知道是否有办法使用 OpenStreetMap(离线或 API)来获取给定 GPS 坐标集的国家/地区名称？我对使用此处提到的 Google 或 Geonames API 不感兴趣:Countr
openstreetmap - 是否有任何与 OpenStreetMap 兼容的免费路线 REST API？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 2年前关闭。 Improve thi
openstreetmap - 使用 OSRM 在 openstreetmaps 上获取路线
我一直在尝试使用具有以下请求的 OSRM 获取从 A 点到 B 点的 route 的坐标列表: 获取 http://router.project-osrm.org/viaroute?hl=en&loc
openstreetmap - 使用 LeafletJS 在 Openstreetmap 中将 map 语言设置为英语
我正在使用 LeafletJS 将 map 组件添加到我的应用程序中。除了 map 的本地化，一切都很好。一些国家名称以本地语言显示(我假设)。有没有办法用英文显示国家名称？这是我使用的当前代码
geolocation - Openstreetmaps 和 Nominatim : Do I install both or does Nominatim include openstreetmaps?
只是在我自己的 Openstreetmaps 服务器上闲逛，遇到了一些问题。 1) 我按照以下说明进行操作:http://wiki.openstreetmap.org/wiki/The_Rails_P
openstreetmap - 沿其周围的圆圈删除标记
我正在与 Open Street Maps 一起工作并使用 leaflet library . 我有一个这样的图层组: var testLayer = new L.LayerGroup(); -->
openstreetmap - 如何在OpenStreetMap中下载中国的县界？
有没有办法在OpenStreetMap中下载有关中国eh县界的shp格式文件？最佳答案您可以通过 Overpass API 获取行政边界。 .对应的query是: relation ["bou
openstreetmap - 单个请求中的多个分离请求
使用 OverPass API，我想在一个单独的查询中进行多个不同的查询，然后在输出中按查询分隔结果。例如: node( )[amenity~"cafe"]->.my_cafes; node(
openstreetmap - 如何在立交桥涡轮中编写具有两个要求的查询？
我正在尝试检索特定巴士服务的巴士路线。如何在天桥查询中包含两个键，以便我可以找到特定巴士服务的巴士路线？例如，我想查找巴士 Svc 3 的巴士路线？我如何包含两个功能: “路线”=“巴士” “名称”
openstreetmap - 多个制造商在同一个地方与传单
我试图在传单 map 上显示很多标记。标记的数据 - 坐标、文本... - 存储在文本文件中。我制作了一个解析文本的解析器，将数据放在一个大数组中，然后我在这个数组上循环以显示每个标记。我的问题是我
openstreetmap - 室内地图创建者
我使用 google API 和 osmdroid API 为安卓设备设计和开发了几个导航应用程序。现在我正在寻找使用 osmdroid API 创建一个室内导航系统。但是，为了做到这一点，我需要从一

首页

博学

6Ren·AI

商城

javascript - 地理定位:使用 OpenStreetMap 绘制 map 和 POI