向Google地圖附近的地方添加自定義圖標
[英]add custom icons to google maps nearby places
問題描述
我必須在google maps我想要的位置和附近的地方。
我似乎無法弄清楚如何向附近的地方添加自定義圖標（標記）。
我是JS新手，所以請幫忙！
1. /////MY CODE/////
<!DOCTYPE html> <html> <head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCAVlwiMJEZaezI2EJvmL5peK4wS3gkFGo&sensor=true"></script>-->
<script>
var infowindow,
placemarkers = [];
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
!!!!this is the places icons. i want to change these icons to custom
icons!!!!!'http://labs.google.com/ridefinder/images/mm_20_orange.png',
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content,
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}
</script> </head> <body onload="initialize()">
<div id="map"> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2014-06-25 12:58:36
<script>
var infowindow,
placemarkers = [];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
},
grocery_or_supermarket: {
icon: iconBase + 'convenience.png'
}
};
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
icons['grocery_or_supermarket'].icon,
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}
Google Maps Api附近搜索-為什么google.maps.places.RankBy.DISTANCE返回的結果更少？
[英]Google Maps Api Nearby Search - Why does google.maps.places.RankBy.DISTANCE return fewer results?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.