如何将城市数据集传递给Google Map API [英] how to pass dataset of cities to google map api

查看:78
本文介绍了如何将城市数据集传递给Google Map API的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嗨专家
场景:从sql服务器获取所有城市,然后在javascrtip中添加城市名称,以便将城市名称传递到geocoder方法中,以使制造商在Google地图上使用"

我做了什么:
我通过Webservice在Sql Server中添加了城市名称,然后将其传递给javascrtip
aspx页面中的Web服务(从sql server中获取城市名称)

hi expert
Scenario: "Get all the cities from sql server then fatch it in javascrtip in order to pass the cities name into geocoder method for taking the makers on google map"

what i did:
i fatched the cities names from Sql server from webservice and then passed it into javascrtip
web service in aspx page(getting the city name from sql server )

<script type="text/C#" runat="server">

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
    public static string[] GetCitiesbyUser_Extender()
    {
       
        System.Data.DataSet dtst = new System.Data.DataSet();
       

        string ses = HttpContext.Current.Session["UserName"].ToString();
        USTER.Dal.clsSearch clssearch = new USTER.Dal.clsSearch();
        // sp for getting the cities name GetAllCitesByUser
        dtst = clssearch.GetAllCitiesByUser(ses);

        
        string[] cntName = new string[dtst.Tables[0].Rows.Count];
        int i = 0;
        try
        {
            foreach (System.Data.DataRow rdr in dtst.Tables[0].Rows)
            {
                cntName.SetValue(rdr["CityName"].ToString(), i);
                i++;
            }
        }
        catch { }
        finally
        {

        }
        return cntName;
    }
    </Script>



在javascrtip中传递了城市名称,该名称当前在按钮上单击警报框中的按钮



passed the cities name in javascrtip that is currently on button click in alert box

<script type="text/javascript">
            function HandleIT() {


                PageMethods.GetCitiesbyUser_Extender(onSucess, onError);
                // should be the same name of return type in web service cntName 
                function onSucess(cntName) {
                    arr = cntName;
                    alert(arr.join('\n'));
                }
</script>
// button click event in body that will handle this function HandleIT
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="HandleIT(); return false;"/>



当我单击此按钮时,我将在警报框中显示所有城市,请下载下面的图像



when i click on this button i will get all the cities in alert box plz download the image below
Image

hope you have seen the image in which i am getting cities are actually the array, i want to convert that array into single string and then pass this cities name one by one from the geocoder method of google map v3 api, the geocoder basically converting the city name into latitude and longitude,
plz see the code of geocoder below

<script type="text/javascript">
        var map;
        var geocoder;
        function initialize() {

            var latlng = new google.maps.LatLng(39.91, 116.38);
            var myOptions =
        {
            zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
                geocoder = new google.maps.Geocoder();

//                PageMethods.GetCitiesbyUser_Extender(onSucess, onError);
//                            function onSucess(cntName) {

//                                    alert(cntName.join('\n'));
//                                        }
                var address = 'Lahore';
                geocoder.geocode({ 'address': address},
                    function (results, status) {

                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });

                        }
                        else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }

                    });
        }
        window.onload = initialize;

</script>
// div in page body with id="map" which will show the map on page
<div id ="map" style="width:600px;height:400px;"></div>





该地图将只显示带有标记的城市拉合尔",因为它已经过硬编码,现在如何将城市数组转换为单个字符串,并通过geocoder方法将其一一传递,以便在地图上获得标记?





The map will only show the city "Lahore" with marker because it`s hard coded yet, now how to convert cities array into single string and pass it one by one from geocoder method in order to get markers on map?

推荐答案

您好

使用Google地理位置API

阅读本文以了解来龙去脉.
https://developers.google.com/maps/documentation/geocoding/ [
Hi

Use the Google Geo-location API

Read this article to get the ins and outs. https://developers.google.com/maps/documentation/geocoding/[^]

Jacques


我自己解决了

i have solved by my self

// Create this function for passing the values which was taken by webservice
        function onSucess(cntName){
        // loop through the cntName to pass the individual City one by one from geocode
            for (i = 0; i < cntName.length; ++i) {
                   //for  fixing the issue use closure to localize the cntName[i] variable before passing into geocode and callback function within it.
                (function CreateMarkAndInfo(address) {
                    geocoder.geocode({ 'address': address },
                        function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                places[i] = results[0].geometry.location;

                                var marker = new google.maps.Marker({
                                    position: places[i],
                                    title: results[0].formatted_address,
                                    map: map,
                                    icon: iconimage
                                });

                                markers.push(marker);
                                mc.addMarker(marker);
                                google.maps.event.addListener(marker, 'click', function () {
                                    if (!infowindow) {
                                        infowindow = new google.maps.InfoWindow();
                                    }

                                    // Setting the content of the InfoWindow afterward
                                    infowindow.setContent(popup_content[i]);

                                    // Tying the InfoWindow to the marker afterward
                                    infowindow.open(map, marker);
                                });

                                // Extending the bounds object with each LatLng
                                bounds.extend(places[i]);

                                // Adjusting the map to new bounding box
                                map.fitBounds(bounds)
                            }
                            else {
                                // if geocode will end the limit then make delay by timer in order to avoid the OVER_QUERY_LIMIT
                                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                                    setTimeout(function () { CreateMarkAndInfo(address); }, (15)); // here i think i should use better approch but for now it`s ok.
                                }
                                else {
                                    alert("Geocode was not successful for the following reason: " + status);
                                }
                            }
                    });
                })(cntName[i]);// End closure trick
            }
        }
    }
    google.maps.event.addDomListener(window, 'load', InitializeMap);


这篇关于如何将城市数据集传递给Google Map API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆