Google Map Marker的地址 [英] Google Map Marker for addresses

查看:62
本文介绍了Google Map Marker的地址的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嗨..

我的数据库中有一些地址.我需要在Google地图上指出这些地址,并在该标记上的鼠标悬停时,应该弹出一个弹出框,显示该特定人员的详细信息.地址是否可能,或者我们应该将其转换为纬度和经度?
我搜索了很多,但没有得到我所需要的...



预先感谢

Hi..

I am having some addresses in my database.i need to point out them on google map and on mouseover on that marker, popup should be raised showing the details of that particular person. IS it possible with address or we should convert it to latitude and longitude?
i searched a lot but i didnt got what i needed...



Thanks in advance

推荐答案

是的,您需要将地址转换为GeoCode,然后将其用于放置在地图上. Google地图使用 LatLng [ https://developers.google.com/maps/documentation/javascript/geocoding [ ^ ]

所以,步骤是

1)通过在 http://maps.googleapis.com/maps上调用maps API,将您的地址转换为GeoCode响应/api/geocode/json [^ ]

2)使用LatLng对象将标记放置在地图上(有关此示例的信息,请参见更多信息"链接.

关于CodeProject的文章也很多,关于如何实现所需的功能
Yes, you need to convert the address to a GeoCode that you then use to place on the map. Google maps uses a LatLng [^] object to initialise marker objects on the map.

Further reading here...

https://developers.google.com/maps/documentation/javascript/geocoding[^]

So, the steps are

1) Convert you address into a GeoCode response by calling the maps API at http://maps.googleapis.com/maps/api/geocode/json[^]

2) Use the LatLng object to place the marker on your map (see the ''further information'' link for examples of this

There are also numerous article on CodeProject on how to achieve what you need to do


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <style type="text/css">
#map_canvas {display:none;}
</style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyAZEI_aszTGmtGUTQP-yxu2DkHRZ9yvctg">
    </script>
 <%--   http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture--%>


<script type="text/javascript">
    var MarkerData = [{ "Name": "Penn Station", "Latitude": 40.75058, "Longitude": -73.99358, "LocationType": "Station" },
                { "Name": "Empire State Building", "Latitude": 40.748039, "Longitude": -73.985753, "LocationType": "Attraction" },
                { "Name": "Times Square", "Latitude": 40.756631, "Longitude": -73.988369, "LocationType": "Attraction" },
                { "Name": "Central Park", "Latitude": 40.770641, "Longitude": -73.974196, "LocationType": "Attraction" },
                { "Name": "Crowne Plaza Times Square", "Latitude": 40.760342, "Longitude": -73.98482, "LocationType": "Hotel" },
                { "Name": "Sheraton New York Hotel ", "Latitude": 40.739714, "Longitude": -73.989315, "LocationType": "Hotel"}]
    function displayMap()
    {
        document.getElementById('map_canvas').style.display = "block";
        initialize();
    }
    function initialize() {
        // create the map

        var myOptions =
         {
             zoom: 14,
             center: new google.maps.LatLng(40.756631, -73.988369),
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
        map = new google.maps.Map(document.getElementById("map_canvas"),
                                                myOptions);

        for (i = 0; i < MarkerData.length; i++) {
            var location = new google.maps.LatLng(MarkerData[i].Latitude, MarkerData[i].Longitude);
            var marker = new google.maps.Marker
                ({
                    position: location,
                    map: map
                });
            iconFile = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png ';
            marker.setIcon(iconFile)


            var title = 'Location : ' + MarkerData[i].Name;
            marker.setTitle(title);

            //attach message
            var msg = 'Location : ' + MarkerData[i].Name + '<br/> ';
            msg = msg + 'Location Type : ' + MarkerData[i].LocationType + '<br/> ';
            attachMessage(marker, msg);
        }
    }
    function attachMessage(marker, msg) {
        var infowindow = new google.maps.InfoWindow({
            content: msg,
            size: new google.maps.Size(120, 120)
        });
    }




</script>
</head>
<body onload="displayMap()">
   <div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
</body>
</html>


这篇关于Google Map Marker的地址的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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