上午,
我创建了一个移动网络应用,使用API v3在Google地图上绘制多个附近位置。
这适用于移动Chrome,移动版Firefox和iPad。移动Opera,但在Androids本机浏览器中无法正常工作。在后者中,未示出标记。它也没有给我错误信息。
URI是 213.175.198.56/~webdesig/restaurants /
以下是代码:
<div id="map1" class="gmap"></div>
<script type="text/javascript">
var map1, latlng1, options1;
var distance = 2000;
function initialize() {
latlng1 = new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("long"));
options1 = { zoom: 12, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP };
//map1 = new google.maps.Map(document.getElementById("map1"), options1);
map1 = new google.maps.Map(document.getElementById('map1'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng1,
zoom: 12
});
var request = {
location: latlng1,
radius: distance,
types: ['restaurant', 'cafe']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map1);
service.nearbySearch(request, callback);
document.getElementById('showing').innerHTML = "Showing restaurants within "+distance+" metres of your location";
}// initialize
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}else{
alert('Unable to plot');
}
}
// Function for adding a marker to the page.
function addMarker(mylocation) {
marker = new google.maps.Marker({
position: mylocation,
map: map1
});
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var request2 = { reference: place.reference };
service.getDetails(request2, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
var rating = details.rating;
if(!rating){rating = 'Not yet rated';}
infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />Rating: " +rating + "<br /><input type=\"button\" onclick=\"location.href='tel:" + details.formatted_phone_number+"'\" value=\"Call "+details.name+" \"/>");
infowindow.open(map1, this);
});
});
var image = new google.maps.MarkerImage(
'images/icons/restaurant.png',
new google.maps.Size(32,50),
new google.maps.Point(0,0),
new google.maps.Point(16,50)
);
var shadow = new google.maps.MarkerImage(
'images/icons/restaurantshadow.png',
new google.maps.Size(60,50),
new google.maps.Point(0,0),
new google.maps.Point(16,50)
);
var shape = {
coord: [28,0,29,1,30,2,31,3,31,4,31,5,31,6,31,7,31,8,31,9,31,10,31,11,31,12,31,13,31,14,31,15,31,16,31,17,31,18,31,19,31,20,31,21,31,22,31,23,31,24,31,25,31,26,31,27,31,28,30,29,29,30,28,31,21,32,21,33,20,34,20,35,20,36,20,37,19,38,19,39,19,40,18,41,18,42,18,43,18,44,17,45,17,46,17,47,16,48,16,49,15,49,15,48,15,47,15,46,14,45,14,44,14,43,13,42,13,41,13,40,12,39,12,38,12,37,11,36,11,35,11,34,10,33,10,32,3,31,2,30,1,29,0,28,0,27,0,26,0,25,0,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,1,2,2,1,3,0,28,0],
type: 'poly'
};
var marker = new google.maps.Marker({
icon: image,
shadow: shadow,
shape: shape,
map: map1,
position: place.geometry.location
});
/*google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name+'<br/>'+place.formatted_address);
infowindow.open(map1, this);
});*/
}
$('.page-map1').live("pagecreate", function() {
initialize();
});
$('.page-map1').live('pageshow',function(){
//console.log("test");
google.maps.event.trigger(map1, 'resize');
map1.setOptions(options1);
// Testing the addMarker function
here = new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("long"));
addMarker(here);
});
</script>