Question

免责声明！我可能会更难，然后它......

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

使命：我正在创建一个显示Dog Friendly Restaurants和Patio Dining的网站。我的目标是为用户提供一个最近的食客的列表，供用户带到那里。理想情况下，我希望包括普通餐厅在谷歌地图上显示的所有相同信息（电话号码，描述，评级，小时。），只是显示一个自定义图标，而不显示任何没有狗友好的餐馆。

我尝试过的解决方案，

使用google maps api创建自定义地图。（我有能力创建自定义标记，标题和说明。但是我无法做到使用现有的谷歌地图数据。仅仅因为我不知道如何，我在使用现有数据方面没有太多发现）
创建共享地图（我还没有完全沉浸其中，但创建已加星标的项目似乎有效，我只是不确定如何在网页上而不是我自己的谷歌上呈现这些数据地图...）
使用google maps api从头开始重新创建位置（完全是痛苦的，我会重新创建我需要的所有数据。基本上使用第一个解决方案。）< / p>

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

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

Answer 1

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

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

以下是使用Google地方信息搜索“狗餐厅”的示例。

<!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。

使用现有位置使用Google Map在Jquery Mobile中创建自定义选定位置？

1 个答案: