码迷,mamicode.com
首页 > 其他好文 > 详细

谷歌地图接口,实现点击标记获取经纬度等信息。

时间:2014-12-12 11:33:53      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   os   sp   for   java   

 

Google map api

Author chenbin
Date 12/12
Email bingoPureLife@gmail.com

标记在地图上的位置 并且获取当前位置的经纬度

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps Demo</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        var infowindow,marker;
        var geocoder = new google.maps.Geocoder();
        function initialize() {
            //var point = new google.maps.LatLng(18.252847, 109.511909);
            var point; // 地图中心

            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {

                    point = new google.maps.LatLng(
                            position.coords.latitude,
                            position.coords.longitude
                    );
                    var myOptions = {
                        zoom: 15, // 缩放级别
                        center: point,
                        mapTypeId: google.maps.MapTypeId.ROADMAP, // 显示普通的街道地图
                        mapTypeControl: false, // 地图类型控件
                        overviewMapControl: false, // 总览图控件
                        scaleControl: false, // 比例控件
                        streetViewControl: false // 街景视图
                    };
                    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                    //添加地图标记
                    marker = new google.maps.Marker({
                        position: point,
                        map: map
                    });
                    marker.setDraggable(true); // 设置可拖拽

                    //初始化信息窗口
                    infowindow = new google.maps.InfoWindow({
                        content: "",
                        size: new google.maps.Size(50,50)
                    });

                    //添加拖动监听事件
                    google.maps.event.addListener(marker, ‘dragend‘, function(){
                        showAddress(map, marker);
                    });
                    //添加点击监听事件

                    google.maps.event.addListener(map, ‘click‘, function(e) {
                        clickMou(map,marker,e.latLng);
                    });
                    showAddress(map,marker);
                }, function() {
                    handleNoGeolocation(true);
                });
            } else {
                // Browser doesn‘t support Geolocation
                handleNoGeolocation(false);
            }
        }
        function handleNoGeolocation(errorFlag) {
            if (!errorFlag) {
                point = new google.maps.LatLng(32.060255, 118.796877);
            }
        }
        function showAddress(map, marker)
        {
            var latlng = marker.getPosition();
            geocoder = new google.maps.Geocoder();

            //根据经纬度获取地址信息
            geocoder.geocode({‘latLng‘: latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        var address = results[1].formatted_address + "<br />";
                        address = results[0].formatted_address + "<br />";
                        address += "纬度:" + latlng.lat() + "<br />";
                        address += "经度:" + latlng.lng();

                        infowindow.setContent(address);
                        infowindow.open(map, marker);
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }

        function clickMou(map, marker,loc)
        {
            marker.setPosition(loc)


            //根据经纬度获取地址信息
            geocoder.geocode({‘latLng‘: loc}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        var address = results[1].formatted_address + "<br />";
                        address = results[0].formatted_address + "<br />";
                        address += "纬度:" + loc.lat() + "<br />";
                        address += "经度:" + loc.lng();

                        infowindow.setContent(address);
                        infowindow.open(map, marker);
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });

        }
    </script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>

  

谷歌地图接口,实现点击标记获取经纬度等信息。

标签:style   blog   http   io   ar   os   sp   for   java   

原文地址:http://www.cnblogs.com/bin-pureLife/p/4159209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!