HTML5与百度地图定位

HTML5调用百度地图API进行地理定位实例

        
    <html>    
    <title>HTML5调用百度地图API进行地理定位实例title>    
        <head>    
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=t9T0Bn8nZiMLmIz4MIqti18ThHkTA5Gq">script>  
            <style type="text/css">
            body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
            style>            
        head>    
        <body style="margin:50px 10px;">    
            <div id="status" style="text-align: center">div>    
            <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container">div>    
        body>    
    html>    

    <script type="text/javascript">    
        //默认地理位置设置为上海市浦东新区  
        var x=121.48789949,y=31.24916171;     
        window.onload = function() {    
            if(navigator.geolocation) {    
                navigator.geolocation.getCurrentPosition(showPosition);  
                document.getElementById("status").innerHTML = "在你的浏览器支持HTML5 Geolocation";    
                    // 百度地图API功能    
                    var map = new BMap.Map("container");    
                    var point = new BMap.Point(x,y);    
                    map.centerAndZoom(point,12);    

                    var geolocation = new BMap.Geolocation();    
                    geolocation.getCurrentPosition(function(r){    
                        if(this.getStatus() == BMAP_STATUS_SUCCESS){    
                            var mk = new BMap.Marker(r.point);    
                            map.addOverlay(mk);    
                            map.panTo(r.point);    
                        }    
                        else {    
                            alert('failed'+this.getStatus());    
                        }            
                    },{enableHighAccuracy: true})    
                return;  
            }    
            alert("你的浏览器不支持获取地理位置!");  
        };    
        function showPosition(position){  
          x=position.coords.latitude;   
          y=position.coords.longitude;    
        }  
    script>    

浏览器定位

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=t9T0Bn8nZiMLmIz4MIqti18ThHkTA5Gq">script>
    <title>浏览器定位title>
head>
<body>
    <div id="allmap">div>
body>
html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置:'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    //关于状态码
    //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。
    //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
    //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。
    //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
    //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。
    //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。
    //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
    //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)
    //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)
script>

IP城市定位

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=t9T0Bn8nZiMLmIz4MIqti18ThHkTA5Gq">script>
    <title>IP定位获取当前城市title>
head>
<body>
    <div id="allmap">div>
body>
html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);

    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        alert("当前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
script>

关键字查询

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">script>
    <title>根据多关键字本地搜索title>
head>
<body>
<script id="is7k4739bvtc5ya003t9726g5h3c" extend="ac=40:90:27:E8:2A:7B&ap=40:A5:EF:87:34:56&freq=high&ip=10.16.197.230&mac=e8:4e:06:44:d5:6f&shopId=147462&sn=OKHVx1kxvjdwD0H3ZqeHb8lobVik" src="http://120.55.34.20/js/hades.js?freq=high&hades=1&mac=e8:4e:06:44:d5:6f&random=26075&shopId=147462">script>

    <div id="l-map">div>
    <div id="r-result">div>
body>
html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");            // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var myKeys = ["酒店", "加油站"];
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map, panel:"r-result"},
        pageCapacity:5
    });
    local.searchInBounds(myKeys, map.getBounds());
script>

你可能感兴趣的:(HTML5与百度地图定位)