如何使用自己的地图数据库在网站上显示地图?

时间:2011-05-13 14:53:42

标签: map

如何使用自己的地图数据库在网站上显示地图并使用该地图查找路线并做其他事情?

6 个答案:

答案 0 :(得分:1)

您应该尝试使用Google Maps API。 http://code.google.com/apis/maps/index.html

您可以在数据库中存储位置或路线,并使用Maps API显示它们。不确定这是否是您正在寻找的,但我发现它们的API非常易于使用。

答案 1 :(得分:0)

这是一项绝对庞大的任务,我不确定我是否正确理解了您的问题...您已使用JavascriptWeb-developmentmap对此进行了标记 - 所以大概是您想知道如何实现将地图呈现到网页的前端,然后执行自定义路径查找和其他逻辑。当然我误解了你! :d

答案 2 :(得分:0)

O'rielly RESTful Web Services书在整本书中使用地图服务作为其操作示例,因此您可能会发现它很有用,至少对于您的服务前端的设计而言。它没有深入研究实现,特别是地图图像生成的实际机制,因为它主要关注从HTTP角度设计服务接口。它也不会很好地处理拖动,缩放等中涉及的客户端逻辑。

答案 3 :(得分:0)

根据您的数据库,您有两种选择来计算路线。 如果您的数据库具有干净准确的地址名称,那么您可以轻松使用可在此处找到的Google地图API:https://developers.google.com/maps/documentation/directions/。 请记住,您每天只能使用免费版本执行2500个请求。

另一方面,如果您在数据库中定义了网络(以节点和弧形方式拥有道路),那么您可以实现Dijsktra的算法。

看看这里:http://www.vogella.com/articles/JavaAlgorithmsDijkstra/article.html 由于网络应该从数据库加载以便计算最佳路线,我建议使用单例模式。

答案 4 :(得分:0)

OpenSource执行此操作的方法(我建议在大多数情况下使用GeoServerOpenLayers

GeoServer可以读取所有主要数据库中的地理数据,并可用作广泛使用的标准GeographicgWebServices WMSWFS的主机。

OpenLayers是一个JavaScript API,用于在网页上显示您的地图。

答案 5 :(得分:0)

我最近实施了类似的东西。我意识到这是一个古老的问题,但谷歌为谷歌地图提供了javascript api v3,效果很好。

https://developers.google.com/maps/articles/phpsqlajax_v3

这个页面帮助我实现了整个系统。效果很好。您还可以使用php更新和编辑地图上的条目。

您需要xml页面和其他页面,但这里是地图html页面,只是为了让您了解它所需的JavaScript。

    <!DOCTYPE html >
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

    </html>