javascript 如何从数据库中的谷歌地图上添加位置（标记）..？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13677741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add locations(markers) on a google map from database..?
提问by Shameer Ali Shaik
I am creating a google map in order to display store locations of a brand across india...
我正在创建一个谷歌地图，以显示一个品牌在印度的商店位置......
i have stored the complete address, with latitude & longitude in my SQL server database...
我已经在我的 SQL 服务器数据库中存储了完整的地址，经纬度...
here I am able to get the address from database and display in my web page, but i am stuck with, mapping the address on google map...
在这里，我可以从数据库中获取地址并显示在我的网页中，但我坚持在谷歌地图上映射地址...
here i have kept a text box so that the user enters his state/city/any location name, and clicks search button, then i have to mark the corresponding store location on the map by a marker..
在这里，我保留了一个文本框，以便用户输入他的州/城市/任何位置名称，然后单击搜索按钮，然后我必须用标记在地图上标记相应的商店位置。
here's my code for googgle map...
这是我的谷歌地图代码......
<script type="text/javascript">
var infowindow = null;
function initialize() {
//var centerMap = new google.maps.LatLng(13.040547,80.230805);
var centerMap = new google.maps.LatLng(12.264864, 77.937012);
var myOptions = {
zoom: 7,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({ });
}
//var sites = '<%=TextBox1.Text%>'
//alert(sites);
//[
//// ['Ambattur', 13.119438,80.148182, 4, 'Ambattur, Chennai, Tamil Nadu, India, 600031'],['Avadi', 13.124453,80.101662, 1, 'Avadi, Tamil Nadu, India, 600017'], ['Jayanagar', 12.928945,77.590599, 1, 'Jayanagar, Bangalore, Karnataka, India, 560041'],['Indira Nagar', 12.973697,77.641325, 1, 'Indira Nagar, Bangalore, Karnataka, India, 560038'],['TamilNadu', 11.415418,78.662109, 1, 'TamilNadu, India, 600017']
//];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: new google.maps.MarkerImage(
'Images/R.png ',
null, null, new google.maps.Point(0, 42)),
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
here, i have sites variable, so that i can map my locations on a map,
在这里，我有站点变量，以便我可以在地图上映射我的位置，
but here i need to map them from database...
但在这里我需要从数据库中映射它们...
any help will be appreciated...
任何帮助将不胜感激...
thanks shameer ali shaik
谢谢shaker ali shaik
采纳答案by Shameer Ali Shaik
Guruparan Giritharan..
Guruparan Giritharan..
As i have told in my question, I want to locate stores across india.. & the sore details will be stored in database.. Now, i am able to get the store details & mark their location on map by your code.. earlier it is working fine for pincode, in the sense if you provide pincode in your searchbox, it will retrieve the corresponding store details..
正如我在我的问题中所说，我想在印度各地找到商店..& 疼痛的详细信息将存储在数据库中.. 现在，我可以获取商店的详细信息并通过您的代码在地图上标记他们的位置.. 更早它适用于密码，从某种意义上说，如果您在搜索框中提供密码，它将检索相应的商店详细信息..
Now, as per my code, in my reply for your blog post, i am able to enter only string values in the textbox., here i need to implement it for numeric values(pincode) also,
现在，根据我的代码，在我对您博客文章的回复中，我只能在文本框中输入字符串值。在这里，我还需要为数值（密码）实现它，
here's my code of update panel and timer click event..
这是我的更新面板和计时器点击事件的代码..
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
//Linq is used to load the table to the code
DataClassesDataContext data = new DataClassesDataContext();
//Select all from the table
//List<addressmap> lst = (from u in data.addressmaps select u).ToList();
List<addressmap> lst = (from u in data.addressmaps where u.StoreLocation == TxtSearch.Text || u.StoreCity == TxtSearch.Text || u.StoreState == TxtSearch.Text || u.StoreCountry == TxtSearch.Text select u).ToList();
//add the table contents to the javascript array so that new locations will be loaded
foreach (addressmap item in lst)
{
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "infoarray", "'" + item.StoreAddress.ToString() + "'");
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "lonarray", item.StoreLongitude.ToString());
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "latarray", item.StoreLatitude.ToString());
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "bounce", item.StoreBounce.ToString());
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
//update the update panel every 10 seconds
UpdatePanel1.Update();
}
here in the select statement, i need for pincode also..
在选择语句中，我也需要密码..
any help will be thankful..
任何帮助将不胜感激..
回答by Sandip
At a first glance, your code seems alright. but here is my Code which works perfectly fine for me may be it will helpful to you.
乍一看，您的代码似乎没问题。但这是我的代码，它对我来说非常好，可能对你有帮助。
myLatlng = new google.maps.LatLng(32.54681317351514, 15.1171875);
myLatlng = 新 google.maps.LatLng(32.54681317351514, 15.1171875);
map = new google.maps.Map(document.getElementById("gmap"), {mapTypeId: google.maps.MapTypeId.ROADMAP,zoom:2,center:myLatlng});
map = new google.maps.Map(document.getElementById("gmap"), {mapTypeId: google.maps.MapTypeId.ROADMAP,zoom:2,center:myLatlng});
/* loop which plot the markers on the map*/
// record[i] holds lat&lang in this format'32.54681317351514, 15.1171875'
var points=record[i].geo_location.split(',');
marker = new google.maps.Marker({
position: new google.maps.LatLng(points[0],points[1]),
draggable: false,
map: map
});
