Javascript 基于数据库的谷歌地图自定义标记
在两周的时间里，我探索了很多关于谷歌地图的知识。我正在尝试阅读论坛和教程。但我在开发GIS web时遇到了这个问题。我正在使用谷歌地图apiv3、postgre数据库和php。我的数据库里有这么多行。现在我只能基于我的数据库显示多个标记，但我需要的是标记基于数据库中的列内容有一个唯一的图标，就像type 1=1.png type 2=2.png一样问题是类型太多，因此无法手动定义它们（因为类型太多，我在数据库列中已经有大约30种类型的内容）。我使用json获取数据库值。我已经尝试阅读论坛和一些教程，但我找不到答案。对不起，我的英语不好。请帮帮我，谢谢。 这是index.php和json.php的代码：Javascript 基于数据库的谷歌地图自定义标记,javascript,php,json,google-maps,google-maps-markers,Javascript,Php,Json,Google Maps,Google Maps Markers,在两周的时间里，我探索了很多关于谷歌地图的知识。我正在尝试阅读论坛和教程。但我在开发GIS web时遇到了这个问题。我正在使用谷歌地图apiv3、postgre数据库和php。我的数据库里有这么多行。现在我只能基于我的数据库显示多个标记，但我需要的是标记基于数据库中的列内容有一个唯一的图标，就像type 1=1.png type 2=2.png一样问题是类型太多，因此无法手动定义它们（因为类型太多，我在数据库列中已经有大约30种类型的内容）。我使用json获取数据库值。我已经尝试阅读论坛和一些教
<html lang="en">
<head>
<script type="text/javascript">
function initialize(){
var peta;
var gambar_tanda;
gambar_tanda = 'assets/images/enseval.jpg';
var x = new Array();
var y = new Array();
var customer_name = new Array();
var rayon_name = new Array();
// posisi default peta saat diload
var lokasibaru = new google.maps.LatLng( -1.2653859,116.83119999999997);
var petaoption = {
zoom: 5,
center: lokasibaru,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// memanggil function ambilpeta() untuk menampilkan koordinat
url = "json.php";
$.ajax({
url: url,
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.enseval.customer.length;i++){
x[i] = msg.enseval.customer[i].x;
y[i] = msg.enseval.customer[i].y;
customer_name[i] = msg.enseval.customer[i].nama_customer;
//rayon_name[i] = msg.enseval.customer[i].nama_rayon
var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y));
tanda = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_tanda,
clickable: true
});
bindInfoWindow(tanda, peta, infowindow, msg.enseval.customer[i].nama_customer );
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function bindInfoWindow(tanda, peta, infowindow, data) {
google.maps.event.addListener(tanda, 'click', function() {
infowindow.setContent(data);
infowindow.open(peta, tanda);
});
}
</script>
函数初始化（）{
var-peta；
var gambar_tanda；
gambar_tanda='assets/images/enseval.jpg'；
var x=新数组（）；
var y=新数组（）；
var customer_name=新数组（）；
var rayon_name=新数组（）；
//posisi默认peta saat卸载
var lokasibaru=new google.maps.LatLng（-1.2653859116.83119997）；
变量选项={
缩放：5，
中心：洛卡西巴鲁，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
peta=new google.maps.Map（document.getElementById（“Map_canvas”），peta选项）；
var infowindow=new google.maps.infowindow({
内容：“”
});
//使用函数ambilpeta（）实现协调
url=“json.php”；
$.ajax({
url:url，
数据类型：“json”，
cache:false，
成功：功能（msg）{
对于（i=0；i我不确定问题出在哪里：）
你必须做的唯一一件事是为所有类型生成图标。你不必手动操作-只需创建一个scipt，为每种类型生成不同颜色的图标，并将其命名为1.jpg
，2.jpg
通过json消息传递类型，然后在客户端动态创建图标url：
gambar_tanda = 'assets/images/'+msg.enseval.customer[i].type+'.jpg';
我不确定是什么问题：）
你必须做的唯一一件事是为所有类型生成图标。你不必手动操作-只需创建一个scipt，为每种类型生成不同颜色的图标，并将其命名为1.jpg
，2.jpg
通过json消息传递类型，然后在客户端动态创建图标url：
gambar_tanda = 'assets/images/'+msg.enseval.customer[i].type+'.jpg';
非常感谢。但是有很多不同的类型，因为在我的数据中，一个对象有10-30个类型，我有43个对象，还有一个唯一的类型，所以可能我有30*43个类型。但是这个例子很简单，我只需要为每个正在运行的程序显示一个对象。所以我仍然可以像1.jpg那样重命名吗？对不起，我的英语不好。嗯，我不是确定你的意思-你可以随意命名你的图标。你只需要定义你想为每个对象显示的类型-它不必与从DB获得的类型相对应。我解决了这个问题，我错过了主要思想，非常感谢gawi…：）非常感谢。但是有很多不同的类型，因为在我的数据中，一个对象有10个-30类型，我有43个对象，另外还有一个唯一的类型，所以可能我有30*43类型。但是这个例子很简单，我只需要为每个正在运行的程序显示一个对象。那么我还可以像1.jpg那样重命名吗？对不起，我的英语不好。我不确定你的意思-你可以随意命名你的图标。你只需要定义哪个您希望为每个对象显示的类型-它不必与从DB获得的类型相对应。我解决了这个问题，我错过了主要思想，非常感谢gawi.）