如何从 mysql 表中标记谷歌地图中的多个位置
How can I mark multiple location in google map from mysql table?
如何在谷歌地图中标记多个位置。纬度和纵向从我的表中作为 json 响应。请检查下面的代码和 json 响应并纠正我?当我alert(myCenter)
纬度和经度显示正确但在地图上显示不正确时
Json 编码
[{"id":"1","lat":"9.9710364","lng":"76.2382596","address":"Ernakulam, pra"},{"id":"2","lat":"9.5946677"
,"lng":"76.5030831","address":"Kochi pra"},{"id":"3","lat":"8.8862925","lng":"76.5850831","address":"Kollam
pra"},{"id":"4","lat":"8.4998965","lng":"76.8543216","address":"Trivandrum pra"}]
法典
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<h1>Load Multiple Marker</h1>
<div id="googleMap" style="width: 800px; height: 500px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Map -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
$(function(){
$.ajax({
url: 'geo-locations.php',
success:function(data){
//Loop through each location.
$.each(data, function(){
//Plot the location as a marker
var myCenter = new google.maps.LatLng(this.lat, this.lng);
//alert(myCenter)
function initialize()
{
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
}
});
});
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
无需为每个标记初始化映射实例,您可以将流程更改为:
-
初始化地图
-
加载数据后,在地图上放置标记
例
$(function () {
$.ajax({
url: 'https://rawgit.com/vgrem/e2dda2a255a24df92bff/raw/d9c694b635612ee405c7d16c355dca19adb6380c/geo-locations.json',
success: function (data) {
initialize(data);
}
});
});
function addMarker(map,position){
var marker = new google.maps.Marker({
position: position,
title: 'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
function initialize(data) {
var mapProp = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var bounds = new google.maps.LatLngBounds();
$.each(data,function(pos) {
var pos = new google.maps.LatLng(this.lat, this.lng);
bounds.extend(pos);
addMarker(map,pos);
});
map.fitBounds(bounds);
}
<h1>Load Multiple Marker</h1>
<div id="googleMap" style="width: 800px; height: 500px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
小提琴
相关文章:
- 谷歌地图固定位置覆盖
- 在谷歌地图上绘制位置数据库
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- PHP谷歌地图-位置红色气球没有显示
- 谷歌地图laravel上圆圈的错误位置
- 点击href在谷歌地图中加载位置
- 使用谷歌地图API和phonegap显示当前位置+方向
- 谷歌地图API标记没有标记我的位置
- 在TWebBrowser(谷歌地图)中显示位置,而无需单击按钮
- 谷歌地图位置自动完成被jQuery Mobile弹出窗口阻止
- 具有常规位置类型的谷歌地图位置构造函数
- 返回我之前指定的谷歌地图位置列表
- Jquery谷歌地图位置-获取选择选项
- 更新基于gps坐标的谷歌地图位置
- 谷歌地图位置搜索框:如何重新计算pac-container的位置
- 谷歌地图位置API地址自动完成和显示选择的结果
- 触发谷歌地图位置信息窗口
- MapsApi -谷歌地图位置服务给出一个奇怪的错误
- 更新谷歌地图位置通过javascript
- 初始化多个谷歌地图位置