在 Jquery Mobile 中使用 Google Map 使用现有位置创建自定义选择的位置？
Posted
技术标签:
【中文标题】在 Jquery Mobile 中使用 Google Map 使用现有位置创建自定义选择的位置？【英文标题】：Creating customly selected locations, in Jquery Mobile, with Google Map using existing locations? 【发布时间】：2013-04-26 21:43:26 【问题描述】：免责声明！我可能会让这件事变得更难……
我正在尝试为移动设备创建自定义 Google 地图网页。此 Google 地图页面将包括用户的当前位置以及该位置内的现有餐厅。我知道谷歌地图已经默认提供了这个。但是，我只想包括我个人挑选的场所。
使命：我正在创建一个网站，该网站将展示狗友好餐厅和露台餐厅。我的目标是为用户提供该位置内最近的食客的列表，以便用户将狗带到那里。理想情况下，我想包含普通餐厅在谷歌地图上显示的所有相同信息（电话号码、描述、评级、营业时间。）除了简单地显示自定义图标，而不显示任何对狗不友好的餐厅。
我尝试过的解决方案，
使用 google maps api 创建自定义地图。（我有能力 创建自定义标记、标题和描述。但是我无法 使用现有的谷歌地图数据。只是因为我不知道如何使用现有数据，所以我没有发现太多）
创建共享地图（我还没有完全深入研究，但创建已加星标的项目似乎可行，我只是不确定如何在网页上而不是在我自己的谷歌上显示该数据地图...）
使用 google maps api 从头开始重新创建位置（这样做非常痛苦，我将重新创建我需要的所有数据。基本上使用第一个解决方案。）
有人做过类似的事情吗？我渴望对此进行进一步研究，但是如果有更好的解决方案，我不想走错了路。这是我第一次使用自定义谷歌地图...
也请原谅我的菜鸟问题，我和他们一样初级......
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于在 Jquery Mobile 中使用 Google Map 使用现有位置创建自定义选择的位置？的主要内容，如果未能解决你的问题，请参考以下文章
在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）
如何使用 jquery 或 jquery mobile mobile 根据日期列出数据
如何在 jquery 3.1.0 中使用“滑动菜单 Jquery Mobile”？