0

免责声明！我可能会让这变得更难，然后它是......

我正在尝试为移动设备创建自定义谷歌地图网页。该 Google 地图页面将包括用户的当前位置以及该位置内的现有餐馆。我知道谷歌地图已经默认提供了这个。但是，我只想包括我个人挑选的场所。

使命：我正在创建一个网站，展示狗友好餐厅和露台餐厅。我的目标是为用户提供该位置内最近的食客的列表，以便用户将狗带到那里。理想情况下，我想包括普通餐厅在谷歌地图上显示的所有相同信息（电话号码、描述、评级、营业时间。）除了简单地显示一个自定义图标，而不显示任何对狗不友好的餐厅。

我尝试过的解决方案，

  • 使用 google maps api 创建自定义地图。（我有能力创建自定义标记、标题和描述。但是我无法使用现有的谷歌地图数据。仅仅因为我不知道如何使用现有数据，所以我没有找到太多）

  • 创建共享地图（我还没有完全深入研究，但创建已加星标的项目似乎可行，我只是不确定如何在网页上而不是在我自己的谷歌地图上显示该数据......）

  • 使用google maps api从头开始重新创建位置（这样做非常痛苦，我将重新创建我需要的所有数据。基本上使用第一个解决方案。）

有没有人做过类似的事情？我渴望进一步研究这一点，但是如果有更好的解决方案，我不想走错兔子洞。这是我第一次使用自定义谷歌地图...

也请原谅我的菜鸟问题，我和他们一样年轻......

4

1 回答 1

0

对于 #2，您可以创建仅包含“已加星标”的宠物友好餐厅的自定义地图，并使用您的地图 ID 让其他人看到它。像这张地图的东西：

对于 #1 和 #3，您可以使用 Google Places API： https ://developers.google.com/maps/documentation/javascript/examples/place-radar-search

这是一个使用 Google Places 中的数据搜索“狗餐厅”的示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Search for up to 200 places with Radar Search</title>
    <link href="http://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,visualization&v=3.exp"></script>
    <script>
var map;
var infoWindow;
var service;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(-33.8668283734, 151.2064891821),
    zoom: 15,
    styles: [
      {
        stylers: [
          { visibility: 'simplified' }
        ]
      },
      {
        elementType: 'labels',
        stylers: [
          { visibility: 'off' }
        ]
      }
    ]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);

  document.forms.kwForm.onsubmit = performSearch;
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: document.forms.kwForm.keywords.value // 'dog restaurant'
  };
  service.radarSearch(request, callback);
  return false;
}

function callback(results, status) {
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    createMarker(result);
  }
}

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      // Star
      path: 'M 0,-24 6,-7 24,-7 10,4 15,21 0,11 -15,21 -10,4 -24,-7 -6,-7 z',
      fillColor: '#ffff00',
      fillOpacity: 1,
      scale: 1/4,
      strokeColor: '#bd8d2c',
      strokeWeight: 1
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width:80%; height:90%; "></div>
    <form id="kwForm">
    <input type=text value="dog restaurant" name="keywords" id="keywords" />
    <input type=submit />
    </form>
  </body>
</html>

现在您需要做的就是使用地理位置跟踪您的位置：

navigator.geolocation.watchPosition

并添加一些 jQuery Mobile 代码，你就有了一个可以工作的应用程序。

如果您想将所有对狗友好的位置导入您自己的数据库，也可以使用嵌入在地图中的 Google Fusion Tables 。

于 2013-05-30T10:11:29.453 回答