google 定位 标记 地址解码 逆解码 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link id="page_favicon" href="favicon.ico" rel="icon" type="image/x-icon" />
<title>地图</title>
<?php include_once MvcReg::$_moduleName . '/views/layout/head.php'; ?>
</head>

<body class="bg_hs" style="padding-bottom: 0px">
<div class="head">
    <div class="content">
        <h3>地图</h3>
    </div>
</div>

<div class="content">
    <div class="top_search">
        <a href="?md=index/search/search&search=me">依名称搜索</a>
        <a href="?md=index/search/regionSearch&search=region">依地图搜索</a>
    </div>
    <div class="search" style="display:none;">
        <form action="#" onsubmit="return false;" method="get" >
            <div class="box">            
                <span>机器：</span>
                <select id="machine" >
                  <option value="">请选择</option>
                  <option value="1">AAA</option>
                  <option value="2">BBB</option>
                </select>            
            </div>
            <div class="box box2">
                <input id="query" name="query" class="text" type="search" placeholder="输入关键字"/>
                <input id="queryBtn" class="bnt" type="button"   />
            </div> 
        </form>       
    </div>
</div>
    
<div class="pop_bg" id="pop_wjmm">
    <div class="pop_bg_com">
        <div class="com" id="com"></div>
        <div class="bnt" id="bnt">
            
        </div>
    </div>
</div>

<div class="content map_bg" >
    <div id="map_pop" class="map_pop"></div>
    <div id="map_canvas" style="width:400px;height:650px"></div>
</div>
<?php include_once MvcReg::$_moduleName . '/views/layout/foot.php'; ?>
<script src="https://maps.googleapis.com/maps/api/js?key=key"></script>
<script>
    var map;
    var markers = [];
    var real_markers = [];
    var build_data = [];
    var real_data = [];
    var infowindow = new google.maps.InfoWindow();
    var real_infowindow = new google.maps.InfoWindow();
    var has_query = true;
    var moveing=false;
    var is_move=true;

    var $me='<?php echo $me;?>';
    var $hpID='<?php echo $hpid;?>';

    var $machine='<?php echo $machine;?>';
    var $region='<?php echo $region;?>';
    var $county='<?php echo $county;?>';
    var $county_id='<?php echo $county_id;?>';

    // 初始化
    function initMap(lat,lng) {
        // var lat = 25.041990;
        // var lng = 121.517215;
       // console.log(build_data)
        if (build_data.length > 0) {
           lat = build_data[0].latitude;
           lng = build_data[0].longitude;
            console.log(5566);
            console.log(lat);
            console.log(lng);
           //  let lat = 24.9954304
           // let lng = 121.4578688
            if($me && $hpID){
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    maxZoom: 16,
                    minZoom: 14,
                    zoom: 8,  //縮放比
                    Center: {lat: parseFloat(lat), lng: parseFloat(lng)},    
                    mapTypeId: 'terrain'
                });
            }

        // Adds a marker at the center of the map.
            addMarker(build_data); //地點
        }

    }

    // Adds a marker to the map and push to the array.
    function addMarker(data) {
        for (var i = 0; i < data.length; i++) {
            console.log(data[i]);

            if (parseFloat(data[i].latitude) > 0 && parseFloat(data[i].longitude) > 0) {
                var location = {lat: parseFloat(data[i].latitude), lng: parseFloat(data[i].longitude)}; // 坐标对象
                var iconUrl;
                var content = '';
                var qubie = data[i].qubie;

                var address = "";
                content = data[i].place + "<br>";
                // 创建坐标点
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: data[i].title,
                    // icon: iconUrl
                });
                makeInfoWindowEvent(map, infowindow, content, marker, i, "build", address);
                markers[i] = marker;
            }
        }

    }

    function makeInfoWindowEvent(map, infowindow, contentString, marker, num, type, address) {

        google.maps.event.addListener(marker, 'click', function () {
            showPopup(num)
        });
    }

    function showPopup(num){
        var obj= build_data[num];
        var html='<div class="title">'+obj.place+'<span class="map_gb">×</span></div>\n' +
            '        <div class="box">\n' +
            '        \t<ul>\n' +
            '                <li><b>· 选择设备</b>'+obj.machine+'</li>\n' ;
        if (obj.other) {
            html +=
                '                <li><b>· 其他</b>' + obj.other + '</li>\n';
        }
        html+=
            '                <li><b>· 服务时间</b>'+obj.service+'</li>\n';
        if (obj.business) {
            html +=
                '                <li><b>· 备注</b>' + obj.business + '</li>\n'
        }
        html+=
            '            </ul>\n' +
            '            <p>lastest update於'+obj.updatedt+'，电话确认。</p>\n' +
            '        </div>\n' +
            '        <div class="bottom">\n' +
            '        \t<a class="bnt1" href="Tel://'+obj.telephone+'">'+obj.telephone+'</a>\n' +
            '            <a class="bnt2" href="https://www.google.com.tw/maps/place/'+obj.county+obj.area+obj.address+'">'+obj.county+obj.area+obj.address+'</a>\n' +
            '            <a class="bnt3" href="javascript:;" onclick="addPlace('+obj.id+')">加入我们</a>\n' +
            '            <p>这里是备注哦！</p>\n' +
            '        </div>';

        $("#map_pop").html(html);
        $(".map_pop").addClass("hov");
        $(".map_gb").click(function(){
            $(".map_pop").removeClass("hov");
        });
    }
    function telephone(tel){
        $("#pop_wjmm").show();
        $('#com').html('确定'+tel+'？');

        var a = '<a class="" href="Tel://'+tel+'">确定</a>'
            a +=  '<a class="zgzg_bnt_qx" href="javascript:void(0)">取消</a>';
        $('#bnt').html(a);

        $(".zgzg_bnt_qx").click(function(){
            $("#pop_wjmm").hide();
        })

    }

    function query(t,lat,lng) {
        markers = [];
        var machine=$("#machine").val();
        var query=$("#query").val();
        $(".map_pop").removeClass("hov");
        let data = '';
        if(t == 'location'){
             data = { lat: lat,lng: lng,};
             // data = { lat:24.9954304, lng:121.4578688};
        }else if(t == 'me'){
            data = { me: $me,hpid: $hpID};
        }else if(t == 'region'){
            data = {county_id: lng,machine:$machine};
        }else{
             data = { machine: machine,query: query,};
        }

        $.ajax({
            url: "?md=index&cl=map&at=search",
            type: "post",
            data: data,
            async: true,
            dataType: "json",
            success: function (r) {
                if (r.status==1){
                    popup(r.msg)
                }else {
                    build_data = r.data;
                    initMap(lat,lng);
                }
            }
        });

    }

    function addPlace(id) {
        $.ajax({
            url: "?md=index&cl=map&at=addplace",//路径
            type: "post",//提交方式
            data: {
                id: id,
            },//请求参数
            async: true,//
            dataType: "json",
            success: function (r) {
                if (r.status==2){
                    window.location.href='?md=index&cl=land&at=land&redirect='+encodeURIComponent('?md=index&cl=map&at=map&hov=2');
                }else {
                    popup(r.msg)
                }
            }
        });
    }

    $( document ).ready(function() {
        var boyd_h = $(window).height();
        $("#map_canvas").height(boyd_h-105);
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            maxZoom: 16,
            minZoom: 14,
            zoom: 16,  //縮放比
            mapTypeId: 'terrain'
        });

// 条件判断 是否自动定位 / 条件定位
        if($me && $hpID){
            console.log($me)
            console.log($hpID)
            query('me',$hpID,'');
            return false;
        }
        else if($region == 'region' && $county){
            let address = $county;
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ address: address }, (results, status) => {
                if (status === "OK") {
                    map.setCenter(results[0].geometry.location);
                    new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                    });
                    query('region',results[0].geometry.location,$county_id);

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

        // // // // // // // 定位当前  // // // // // // //
        geocoder = new google.maps.Geocoder();
        infoWindow = new google.maps.InfoWindow();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    codeLatLng(pos.lat,pos.lng)
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(
                browserHasGeolocation
                    ? "Error: The Geolocation service failed."
                    : "Error: Your browser doesn't support geolocation."
            );
            infoWindow.open(map);
        }

        function codeLatLng(lat,lng) {
            var infowindow = new google.maps.InfoWindow();
            var latlng = new google.maps.LatLng(lat, lng);
            // var latlng = new google.maps.LatLng(24.9954304, 121.4578688);
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {            // 定位当前位置
                        map.setZoom(16);
                        marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                        });
                        map.setCenter(latlng);    // 设置中心位置
                        infowindow.setContent(results[1].formatted_address); // 设置内容
                        infowindow.open(map, marker);    // 创建视图窗口
                        query('location',lat,lng);    // 自定义方法筛选数据
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }

    });




    // 定位城市中心点
    function geocodeAddress() {
        // location包含经过地理编码的纬度，经度值。请注意，我们将此位置作为LatLng对象而不是格式化字符串返回。
        let address = '六安市';
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ address: address }, (results, status) => {
            if (status === "OK") {
                map.setCenter(results[0].geometry.location);
                new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }

    // geocodeAddress();


</script>
</body>
</html>

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link id="page_favicon" href="favicon.ico" rel="icon" type="image/x-icon" />
<title>地图</title>
<?php include_once MvcReg::$_moduleName . '/views/layout/head.php'; ?>
</head>

<body class="bg_hs" style="padding-bottom: 0px">
<div class="head">
    <div class="content">
        <h3>地图</h3>
    </div>
</div>

<div class="content">
    <div class="top_search">
        <a href="?md=index/search/search&search=me">依名称搜索</a>
        <a href="?md=index/search/regionSearch&search=region">依地图搜索</a>
    </div>
    <div class="search" style="display:none;">
        <form action="#" onsubmit="return false;" method="get" >
            <div class="box">            
                <span>机器：</span>
                <select id="machine" >
                  <option value="">请选择</option>
                  <option value="1">AAA</option>
                  <option value="2">BBB</option>
                </select>            
            </div>
            <div class="box box2">
                <input id="query" name="query" class="text" type="search" placeholder="输入关键字"/>
                <input id="queryBtn" class="bnt" type="button"   />
            </div>
        </form>       
    </div>
</div>
    
<div class="pop_bg" id="pop_wjmm">
    <div class="pop_bg_com">
        <div class="com" id="com"></div>
        <div class="bnt" id="bnt">
            
        </div>
    </div>
</div>

<div class="content map_bg" >
    <div id="map_pop" class="map_pop"></div>
    <div id="map_canvas" style="width:400px;height:650px"></div>
</div>
<?php include_once MvcReg::$_moduleName . '/views/layout/foot.php'; ?>
<script src="https://maps.googleapis.com/maps/api/js?key=key"></script>
<script>
    var map;
    var markers = [];
    var real_markers = [];
    var build_data = [];
    var real_data = [];
    var infowindow = new google.maps.InfoWindow();
    var real_infowindow = new google.maps.InfoWindow();
    var has_query = true;
    var moveing=false;
    var is_move=true;

    var $me='<?php echo $me;?>';
    var $hpID='<?php echo $hpid;?>';

    var $machine='<?php echo $machine;?>';
    var $region='<?php echo $region;?>';
    var $county='<?php echo $county;?>';
    var $county_id='<?php echo $county_id;?>';

    // 初始化
    function initMap(lat,lng) {
        // var lat = 25.041990;
        // var lng = 121.517215;
       // console.log(build_data)
        if (build_data.length > 0) {
           lat = build_data[0].latitude;
           lng = build_data[0].longitude;
            console.log(5566);
            console.log(lat);
            console.log(lng);
           //  let lat = 24.9954304
           // let lng = 121.4578688
            if($me && $hpID){
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    maxZoom: 16,
                    minZoom: 14,
                    zoom: 8,  //縮放比
                    Center: {lat: parseFloat(lat), lng: parseFloat(lng)},    
                    mapTypeId: 'terrain'
                });
            }

        // Adds a marker at the center of the map.
            addMarker(build_data); //地點
        }

    }

    // Adds a marker to the map and push to the array.
    function addMarker(data) {
        for (var i = 0; i < data.length; i++) {
            console.log(data[i]);

            if (parseFloat(data[i].latitude) > 0 && parseFloat(data[i].longitude) > 0) {
                var location = {lat: parseFloat(data[i].latitude), lng: parseFloat(data[i].longitude)}; // 坐标对象
                var iconUrl;
                var content = '';
                var qubie = data[i].qubie;

                var address = "";
                content = data[i].place + "<br>";
                // 创建坐标点
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: data[i].title,
                    // icon: iconUrl
                });
                makeInfoWindowEvent(map, infowindow, content, marker, i, "build", address);
                markers[i] = marker;
            }
        }

    }

    function makeInfoWindowEvent(map, infowindow, contentString, marker, num, type, address) {

        google.maps.event.addListener(marker, 'click', function () {
            showPopup(num)
        });
    }

    function showPopup(num){
        var obj= build_data[num];
        var html='<div class="title">'+obj.place+'<span class="map_gb">×</span></div>\n' +
            '        <div class="box">\n' +
            '        \t<ul>\n' +
            '                <li><b>· 选择设备</b>'+obj.machine+'</li>\n' ;
        if (obj.other) {
            html +=
                '                <li><b>· 其他</b>' + obj.other + '</li>\n';
        }
        html+=
            '                <li><b>· 服务时间</b>'+obj.service+'</li>\n';
        if (obj.business) {
            html +=
                '                <li><b>· 备注</b>' + obj.business + '</li>\n'
        }
        html+=
            '            </ul>\n' +
            '            <p>lastest update於'+obj.updatedt+'，电话确认。</p>\n' +
            '        </div>\n' +
            '        <div class="bottom">\n' +
            '        \t<a class="bnt1" href="Tel://'+obj.telephone+'">'+obj.telephone+'</a>\n' +
            '            <a class="bnt2" href="https://www.google.com.tw/maps/place/'+obj.county+obj.area+obj.address+'">'+obj.county+obj.area+obj.address+'</a>\n' +
            '            <a class="bnt3" href="javascript:;" onclick="addPlace('+obj.id+')">加入我们</a>\n' +
            '            <p>这里是备注哦！</p>\n' +
            '        </div>';

        $("#map_pop").html(html);
        $(".map_pop").addClass("hov");
        $(".map_gb").click(function(){
            $(".map_pop").removeClass("hov");
        });
    }
    function telephone(tel){
        $("#pop_wjmm").show();
        $('#com').html('确定'+tel+'？');

        var a = '<a class="" href="Tel://'+tel+'">确定</a>'
            a +=  '<a class="zgzg_bnt_qx" href="javascript:void(0)">取消</a>';
        $('#bnt').html(a);

        $(".zgzg_bnt_qx").click(function(){
            $("#pop_wjmm").hide();
        })

    }

    function query(t,lat,lng) {
        markers = [];
        var machine=$("#machine").val();
        var query=$("#query").val();
        $(".map_pop").removeClass("hov");
        let data = '';
        if(t == 'location'){
             data = { lat: lat,lng: lng,};
             // data = { lat:24.9954304, lng:121.4578688};
        }else if(t == 'me'){
            data = { me: $me,hpid: $hpID};
        }else if(t == 'region'){
            data = {county_id: lng,machine:$machine};
        }else{
             data = { machine: machine,query: query,};
        }

        $.ajax({
            url: "?md=index&cl=map&at=search",
            type: "post",
            data: data,
            async: true,
            dataType: "json",
            success: function (r) {
                if (r.status==1){
                    popup(r.msg)
                }else {
                    build_data = r.data;
                    initMap(lat,lng);
                }
            }
        });

    }

    function addPlace(id) {
        $.ajax({
            url: "?md=index&cl=map&at=addplace",//路径
            type: "post",//提交方式
            data: {
                id: id,
            },//请求参数
            async: true,//
            dataType: "json",
            success: function (r) {
                if (r.status==2){
                    window.location.href='?md=index&cl=land&at=land&redirect='+encodeURIComponent('?md=index&cl=map&at=map&hov=2');
                }else {
                    popup(r.msg)
                }
            }
        });
    }

    $( document ).ready(function() {
        var boyd_h = $(window).height();
        $("#map_canvas").height(boyd_h-105);
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            maxZoom: 16,
            minZoom: 14,
            zoom: 16,  //縮放比
            mapTypeId: 'terrain'
        });

        if($me && $hpID){
            console.log($me)
            console.log($hpID)
            query('me',$hpID,'');
            return false;
        }
        else if($region == 'region' && $county){
            let address = $county;
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ address: address }, (results, status) => {
                if (status === "OK") {
                    map.setCenter(results[0].geometry.location);
                    new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                    });
                    query('region',results[0].geometry.location,$county_id);

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

        // // // // // // // 定位  // // // // // // //

        geocoder = new google.maps.Geocoder();
        infoWindow = new google.maps.InfoWindow();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    codeLatLng(pos.lat,pos.lng)
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(
                browserHasGeolocation
                    ? "Error: The Geolocation service failed."
                    : "Error: Your browser doesn't support geolocation."
            );
            infoWindow.open(map);
        }

        function codeLatLng(lat,lng) {
            var infowindow = new google.maps.InfoWindow();
            var latlng = new google.maps.LatLng(lat, lng);
            // var latlng = new google.maps.LatLng(24.9954304, 121.4578688);
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {            // 定位当前位置
                        map.setZoom(16);
                        marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                        });
                        map.setCenter(latlng);    // 设置中心位置
                        infowindow.setContent(results[1].formatted_address); // 设置内容
                        infowindow.open(map, marker);    // 创建视图窗口
                        query('location',lat,lng);    // 自定义方法筛选数据
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }

    });




    // 定位城市中心点
    function geocodeAddress() {
        // location包含经过地理编码的纬度，经度值。请注意，我们将此位置作为LatLng对象而不是格式化字符串返回。
        let address = '六安市';
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ address: address }, (results, status) => {
            if (status === "OK") {
                map.setCenter(results[0].geometry.location);
                new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }

    // geocodeAddress();


</script>
</body>
</html>

posted @ 2020-11-16 17:00  现世中的素人  阅读(212)  评论(0)  编辑  收藏  举报