我试图让标记出现在风格化的谷歌地图中,使用谷歌API。
如果我这样试试:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(51.49079, -0.10746),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new GMaps({
div: "#map1",
lat: 41.895465,
lng: 12.482324,
zoom: 1,
zoomControl : true,
zoomControlOpt: {
style : "SMALL",
position: "TOP_LEFT"
},
panControl : true,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
var styles = [
{
featureType: "road",
stylers: [
{ "hue": "#ff0000" },
{ "lightness": -11 },
{ "saturation": -5 }
]
}, {
featureType: "road",
stylers: [
{ "saturation": -26 }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
// Add 5 markers to the map at random locations
var southWest = new google.maps.LatLng(-31.203405, 125.244141);
var northEast = new google.maps.LatLng(-25.363882, 131.044922);
//var bounds = new google.maps.LatLngBounds(southWest, northEast);
//map.fitBounds(bounds);
var cities = [
{
name: 'London',
position: new google.maps.LatLng(51.49079,-0.10746),
info: 'Bewohner: 7,556,900'
},
{
name: 'Paris',
position: new google.maps.LatLng(48.856667,2.350987),
info: 'Bewohner: 2,193,031'
},
{
name: 'Berlin',
position: new google.maps.LatLng(52.523405,13.4114),
info: 'Bewohner: 3,439,100'
}
];
cities.forEach(function(element, index, array) {
var marker = new google.maps.Marker({
position: element.position,
map: map[0],
title: element.name
});
var infoWindow = new google.maps.InfoWindow({
content: element.info
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
我在萤火虫中没有错误,但没有标记出现。
如果我改变了这个:
var marker = new google.maps.Marker({
position: element.position,
map: map[0],
到
map: map,
我收到一条错误消息,指出属性映射的值无效。
我的代码中的错误在哪里?
谢谢!
答案 0 :(得分:0)
而不是GMaps使用google.maps.Map来创建地图 试试这个链接。这可能会对你有帮助。
https://developers.google.com/maps/documentation/javascript/overlays?hl=en#Markers
编辑了您的代码
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(51.49079, -0.10746),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var styles = [
{
featureType: "road",
stylers: [
{ "hue": "#ff0000" },
{ "lightness": -11 },
{ "saturation": -5 }
]
}, {
featureType: "road",
stylers: [
{ "saturation": -26 }
]
}
];
map.setOptions({styles: styles});
var cities = [
{
name: 'London',
position: new google.maps.LatLng(51.49079,-0.10746),
info: 'Bewohner: 7,556,900'
},
{
name: 'Paris',
position: new google.maps.LatLng(48.856667,2.350987),
info: 'Bewohner: 2,193,031'
},
{
name: 'Berlin',
position: new google.maps.LatLng(52.523405,13.4114),
info: 'Bewohner: 3,439,100'
}
];
for(var i=0;i<cities.length;i++)
{
var element=cities[i];
var marker = new google.maps.Marker({
position: element.position,
map: map,
title: element.name
});
var infoWindow = new google.maps.InfoWindow({
content: element.info
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
}
}