百度地图定位例子

最新推荐文章于 2022-04-01 17:50:42 发布

本是后山人

最新推荐文章于 2022-04-01 17:50:42 发布

阅读量263

点赞数

分类专栏：百度地图文章标签：百度地图

本文链接：https://blog.csdn.net/sinat_36707441/article/details/85156911

版权

百度地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta content="定位" name="description" />
    <meta content="telephone=no" name="format-detection" />
    <link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="shttp://api.map.baidu.com/library/MapWrapper/1.2/src/MapWrapper.min.js"></script>

    <style type="text/css">
        *{margin:0px;padding:0px;}
        html, body {height: 100%;}
        body, button, input, select, textarea, p, div {font: 16px/18px Verdana, Helvetica, Arial, sans-serif;}
        p{ width:603px; padding-top:3px;overflow:hidden;}
        .btn{width:142px;}
        #container{width:100%;height:90%;}
        .btn-info{ width:96%;margin:5px 2%;}
    </style>
</head>

<script type="text/javascript">

    var init = function() {
        var map = new BMap.Map("container");
        map.centerAndZoom(new BMap.Point(116, 23), 10);
        map.enableScrollWheelZoom();
        var optsNavigation = {anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM, enableGeolocation: true}
            map.addControl(new BMap.NavigationControl(optsNavigation));//地图平移缩放控件
        var mapWforGPS = new BMapLib.MapWrapper(map, BMapLib.COORD_TYPE_GPS);
        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25), // 指定定位位置
            imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
        });

        // 用经纬度设置地图中心点
        var longitude = 116.6867520;
        var latitude = 23.4693840;
        if( longitude!=null && latitude != null){
            map.clearOverlays();
            var new_point = new BMap.Point(longitude,latitude);
            var infoWindow = new BMap.InfoWindow("I'm here.");
            var marker = new BMap.Marker(new_point,{icon:myIcon});  // 创建标注
            //点击标注显示信息
            marker.addEventListener("mouseover", function(){
                this.openInfoWindow(infoWindow);
            });
            map.addOverlay(marker);              // 将标注添加到地图中
            marker.openInfoWindow(infoWindow);
            map.zoomTo(19);//min:3,max:19
            map.panTo(new_point);
        }

    }


</script>

<body  onload="init()">
<div id="container"></div>
<!--<div class="row " style="overflow:scroll;overflow-x:hidden;overflow-y:hidden;margin:10px 0 0 0;">
    <div class="col-xs-12 ">
        <button id="ck" class="btn btn-info">查看地图</button>
    </div>
</div>-->
</body>

</html>

本是后山人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图定位例子

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta content="text/html; charset=utf8" http-equiv="Content-Type" /&gt; &lt;meta name="viewport" content="width=device-width,
复制链接

扫一扫