个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-10-31 23:24:10 24 4
gpt4 key购买 nike

我正在制作一个网站，访问者可以在 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 中的命名空间反射
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com