添加UL的标记下面的地图
Add UL of Markers Underneath Map
尝试在我的地图下方的半径内添加一个位置标记列表。这样做是新的函数调用回调或createMarker函数上面?
我的逻辑是使用在地图上放置标记的函数填充列表。
下面是当前代码,我的list函数的开头被注释掉了:
var geocoder;
var map;
var infowindow;
var webster = new google.maps.LatLng(43.200371, -77.498245);
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
var request = {
location: webster,
radius: 50000,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = '2450 Empire Blvd, Webster, NY 14580 US';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
function createUL(){
var items = document.getElementById("results");
for (var i = 0; i < results.length; i++ ) {
var item = document.createElement("li");
item.innerHTML = results[i];
items.appendChild(item);
}
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
jsfiddle.net/michaelkurz_/jgm72khd/33/
- 调用createUL函数
- 将位置查询的结果传递给它。
- 保存对标记的引用(我在
gmarkers
数组中这样做) - 将UL中的名称链接到标记
概念验证
var geocoder;
var map;
var infowindow;
var webster = new google.maps.LatLng(43.200371, -77.498245);
var gmarkers = [];
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
var request = {
location: webster,
radius: 50000,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = '2450 Empire Blvd, Webster, NY 14580 US';
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
createUL(results);
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
gmarkers.push(marker);
}
function createUL(results) {
var items = document.getElementById("results");
for (var i = 0; i < results.length; i++) {
var item = document.createElement("li");
item.innerHTML = "<a href='javascript:google.maps.event.trigger(gmarkers[" + i + "],'"click'");'>" + results[i].name + "</a><br>";
items.appendChild(item);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
width: 450px;
height: 400px;
}
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map-canvas"></div>
<div id="results"></div>
相关文章:
- 谷歌地图固定位置覆盖
- 在单独的ul's
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 缓存谷歌地图数据
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 在谷歌地图上绘制位置数据库
- 标记的实时更新,无需加载页面谷歌地图API V3
- 添加UL的标记下面的地图