html5利用google实现定位和搜索

最新推荐文章于 2021-06-10 13:25:08 发布

混沌极致

最新推荐文章于 2021-06-10 13:25:08 发布

阅读量2.5k

点赞数

分类专栏： HTML5、CSS3

本文链接：https://blog.csdn.net/marujunyy/article/details/8466271

版权

HTML5、CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

googleMapapi接口文档 开发人员指南（中文）

效果图如下：

github源码地址: git@github.com:marujun/html5-geo-google-map.git

查看demo

首先写一个基本的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>HTML5 Demo: geolocation</title>
    <link rel="stylesheet" href="./stylesheets/html5demos.css">
<body>
<section id="wrapper">
    <header>
        <h1>geolocation</h1>
    </header>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <!--<script type="text/javascript" src="./javascripts/googleMapApi.js"></script>-->
    <article>
        <p>Finding your location: <span id="status">checking...</span></p>
        <div>
            <input id="address"  value="当前位置"/>
            <input type="button" value="搜索地点" οnclick="codeAddress()" id="search">
        </div>
        <div>
            <b>Start: </b>
            <input id="start"  >
            <b>End: </b>
            <input id="end" >
            <select id="method"  >
                <option value="DRIVING">开车</option>
                <option value="WALKING">步行</option>
            </select>
            <input type="button" value="搜索路线" οnclick="calcRoute()" id="searchRoute">
        </div>
    </article>

    <script>
        var geocoder;
        var map;
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
        function success(position) {
            var s = document.querySelector('#status');//获取元素节点
            if (s.className == 'success') {
                // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
                return;
            }
            s.innerHTML = "found you!";
            s.className = 'success';
            var mapcanvas = document_createElement_x_x_x_x_x('div');
            mapcanvas.id = 'mapcanvas';
            mapcanvas.style.height = '400px';
            mapcanvas.style.width = '560px';

            document.querySelector('article').a(mapcanvas);
            console.log("postion : ",position );
            geocoder = new google.maps.Geocoder();//google.maps.Geocoder 对象，访问 Google Maps API 地址解析服务
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            //获取经纬度创建google.maps.LatLng实例
            var myOptions = {   //地图设置
                zoom: 15,  //缩放级别
                center: latlng,//地图中心点位置
                mapTypeControl: false,//是否显示地图的类型，地图或卫星是否显示地形等
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL },//地图的放大缩小功能类型{DEFAULT ,DEFAULT}
                mapTypeId: google.maps.MapTypeId.ROADMAP//默认的2D地图类型还有{SATELLITE ,HYBRID ,TERRAIN}
            };

            //googleMap  api接口文档 https://developers.google.com/maps/documentation/javascript/tutorial
            map = new google.maps.Map(document.getElementByIdx_x_x_x_x_x("mapcanvas"), myOptions);

            var marker = new google.maps.Marker({ //设置地图标记的参数
                position: latlng,//标记的位置
                map: map,
                title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
            });
        }

        function error(msg) {
            var s = document.querySelector('#status');
            s.innerHTML = typeof msg == 'string' ? msg : "failed";
            s.className = 'fail';

            // console.log(arguments);
        }
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success, error);
        } else {
            error('not supported');
        }
//地址解析api文档接口：https://developers.google.com/maps/documentation/javascript/services?hl=zh-CN#Geocoding
        function codeAddress() {
            var address = document.getElementByIdx_x_x_x_x_x("address").value;
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    console.log("the result is : ",results);
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                    });
                } else {
                    alert("未搜索到您输入的地址，请重新输入！！！！");
                    console.log("Geocode was not successful for the following reason: " + status);
                }
            });
        }
//搜索行车路线
        function calcRoute() {
            directionsDisplay.setMap(map);
            var start = document.getElementByIdx_x_x_x_x_x("start").value;
            var end = document.getElementByIdx_x_x_x_x_x("end").value;
            var method=document.getElementByIdx_x_x_x_x_x("method").value;
            var request = {
                origin:start,//起点
                destination:end//终点
            };
            if(method=="DRIVING"){
                request.travelMode=google.maps.TravelMode.DRIVING;//出行方式为开车
            }else{
                request.travelMode=google.maps.TravelMode.WALKING;//出行方式为步行
            }
            directionsService.route(request, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                }else{
                    alert("未搜索到您需要的路线，请重新输入！！！！");
                    console.log("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    </script>
</section>
</body>
</html>

googleMap 地址解析api

基本页面有了，下面加上css使页面更美观一点

body {
    font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
    background: rgb(237, 237, 236);
    margin: 0;
    margin-top: 40px;
    padding: 0;
}

section, header, footer {
    display: block;
}

#wrapper {
    width: 600px;
    margin: 0 auto;
    background: #fff  repeat-x center bottom;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border-top: 1px solid #fff;
    padding-bottom: 76px;
}

h1 {
    padding-top: 10px;
}
#search,#searchRoute,#method{
    font-size: 20px;
}

header,
article > *,
footer > * {
    margin: 20px;
}

footer > * {
    margin: 20px;
    color: #999;
}

#status {
    padding: 5px;
    color: #fff;
    background: #ccc;
}

#status.fail {
    background: #c00;
}

#status.success {
    background: #0c0;
}

#status.offline {
    background: #c00;
}

#status.online {
    background: #0c0;
}