我有一个带有谷歌地图的网页。我使用 javascript 根据来自 json 文件的地址在地图上放置标记。json文件中有7个地址。
当地图加载时,我在地图上看到所有 7 个图标,但它们立即消失,然后使用边界框调整地图的大小。
我的代码是错误的还是我在地图上可以拥有的数字图标有限制。无论查找多少个地址,它始终在地图上保留 5 个图标。所有其他都被删除。我怀疑是否存在限制,因为我看过带有数百个图标的地图。
我确实为每个地址使用了不同的图标。所以我删除了自定义图标并使用了谷歌提供的标准图标。同样的问题。所以,它似乎在代码中。帮助任何人。
// JavaScript Document
$(document).ready(function() {
var addresses = [];
var address, company;
var geocoder, marker, thumbtack;
var bounds = new google.maps.LatLngBounds();
// Set map options
var options = {
zoom:11,
center: new google.maps.LatLng(Lat, Lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
// Create the map
var map = new google.maps.Map(document.getElementById('map'), options);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(Lat, Lng),
title: "Your Zip Code"
});
//bounds.extend(new google.maps.LatLng(Lat, Lng));
// Get the data
// var listing is already set in footer.php
processFile(listings);
function processFile(listings) {
$.each(listings,function(business, info) {
address = info[2];
company = info[0];
thumbtack = info[4];
getCoordinates(address, company, thumbtack);
});
}
function getCoordinates(address, company, thumbtack) {
var counter = 0;
// Check to see if we already have a geocoded object. If not we create one.
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Create a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the geocode request and adding marker
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceding
if (status == google.maps.GeocoderStatus.OK) {
addresses.push(results[0].geometry.location);
counter++;
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: company,
//icon: "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker" + thumbtack + ".png"
icon: thumbtack
});
//bounds.extend(results[0].geometry.location);
// Adjusting the map to new bounding box
//map.fitBounds(bounds);
}
});
};
});