gpt4 book ai didi

php - 从 mysql 数据库加载标记并在 Google map 上显示为标记

转载 作者:行者123 更新时间:2023-11-29 08:17:18 25 4
gpt4 key购买 nike

我正在使用phonegap,并且我有一个谷歌地图,它可以定位用户并在 map 上放置一个标记。我想要做的是从 mysql 数据库加载标记,该数据库保存每个地方的纬度和经度详细信息。我必须通过 php 和 ajax 来完成此操作吗?这是我目前拥有的代码。谢谢

 <html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript">

function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':false,'timeout':10000});

}

//GEOLOCATION
var onSuccess = function(position) {


var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
var myLatlng = new google.maps.LatLng(myLat, myLong);

//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});


};

// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}


</script>
</head>
<body onload="onLoad()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

最佳答案

定义 map

var map;

初始化 map :

function initialize(lat,lng, n) {  //BY PASSING LATITUDE (lat), LONGITUDE (lng) AND THE TEXT (n) WILL SET A DEFAULT MARKER
var mapOptions = {
scaleControl: true,
center: new google.maps.LatLng(lat, lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<b>ا'+n+'</b>');
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}

在设备就绪函数中调用此函数。您可以传递当前的纬度、经度-

var myLat = position.coords.latitude;
var myLong = position.coords.longitude;

调用ajax请求并从服务器获取位置数据。在ajax成功请求中的位置数组中插入所有纬度和经度并调用setMarkers方法

var loc_array = new Array(); //LOCATION ARRAY  
$.each(server_response_array, function(i,v){
loc_array[i] = [v.lat, v.lng, v.temp_txt];
}
setMarkers(loc_array);

function setMarkers(locations){
//clearMap();
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker, i
for (i = 0; i < locations.length; i++)
{
var loan = locations[i]['txt'];
var lat = locations[i]['lat'];
var lng = locations[i]['lng'];
latlngset = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset, icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' //THIS WILL SET A BLUE COLOR MARKER YOU CAN SET MORE COLOR AND ALSO CAN MANAGE FROM DATABASE
});
//map.setCenter(marker.getPosition())
var content = loan;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}

另请参阅此链接

goole-map-javascript-api-unable-to-load-markers-from-mysql-database

关于php - 从 mysql 数据库加载标记并在 Google map 上显示为标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20342078/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com