我正在使用 jquery 和 Google Maps V3 API 向 Google Maps 动态添加标记。当按钮search_button
单击后,将使用 AJAX 向服务器发送请求,该请求将返回与结果对应的 LatLng JSON 数组,该数组将用于放置标记。但是在我的 Javascript Conole 中,我收到错误:Invalid value for property <map>: map
.我哪里做错了?这是我的代码:
HTML header JS:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(42.354183,-71.065063);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
</script>
jQuery
$(function() {
$("#search_button").click(function(e){
e.preventDefault();
// Place markers on map
for( i = 0; i < json.length; i++) {
var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
});
});
});
最佳答案
您应该将名为 map 的变量设为全局变量。仅此而已,实际上我的建议是将所有内容移动到这样的 javascript 文件中
$(document).ready(initialize);
var map;
function initialize() {
var latlng = new google.maps.LatLng(42.354183,-71.065063);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map-canvas')[0], options);
$("#search_button").click(function(e){
e.preventDefault();
// Place markers on map
for( i = 0; i < json.length; i++) {
var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
});
}
关于javascript - 使用 jQuery 动态添加 Google Map V3 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7844626/