zoukankan      html  css  js  c++  java
  • 百度地图搜索地点导航

    <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 { 100%;height: 95%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zfTIKtNx9zBgxLIwpAOt28dE"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
        
        <title>导航到目标地点</title>
    </head>
    <body>
        <div id="allmap"></div>
        <center><div><input id="keyword" type="text"/>
        <%--<input type="text" id="jingweidu"/>
        --%><input type="button" value="搜索" onclick="searchByStationName();"/></div></center>
    </body>
    </html>
    <script type="text/javascript">
        var map = new BMap.Map("allmap");
        
        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.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 11);
                map.panTo(r.point);
            }
            else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
        
        var localSearch = new BMap.LocalSearch(map);
        localSearch.enableAutoViewport(); //允许自动调节窗体大小
        
        function searchByStationName() {
            map.clearOverlays();//清空原来的标注
            var keyword = document.getElementById("keyword").value;
             localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0);
                //document.getElementById("jingweidu").value = poi.point.lng + "," + poi.point.lat;
                map.centerAndZoom(poi.point, 13);
                map.enableScrollWheelZoom();
                
                var content = "经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注,为要查询的地方对应的经纬度

                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                marker.addEventListener("click", function(e){
                    searchInfoWindow.open(marker);
                })
                //创建检索信息窗口对象
                var searchInfoWindow = null;
                searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                        title  : keyword,      //标题
                        width  : 290,             //宽度
                        height : 105,              //高度
                        panel  : "panel",         //检索结果面板
                        enableAutoPan : true,     //自动平移
                        searchTypes   :[
                            BMAPLIB_TAB_SEARCH,   //周边检索
                            BMAPLIB_TAB_TO_HERE,  //到这里去
                            BMAPLIB_TAB_FROM_HERE //从这里出发
                        ]
                    });
                
            });
            localSearch.search(keyword);
        }
    </script><%--

    var geoc = new BMap.Geocoder();    

    map.addEventListener("click", function(e){        
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            var url="http://api.map.baidu.com/marker?location="+r.point.lat+","
               +r.point.lng+"&title=目标位置&content="+addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber+"&output=html";
               window.location.href = url;
            });        
    });
    --%>

  • 相关阅读:
    nginx 403 forbidden 二种原因
    【Spring-AOP-学习笔记-3】@Before前向增强处理简单示例
    【Oracle学习笔记-5--】集合操作之union,intersect和minus操作
    【Oracle学习笔记-2】Oracle基础术语解析
    【数据库设计-1.2】主键的设计
    【数据库设计-1.1】关系的实现
    【Servlet和JSP-学习-1】基础知识
    【Spring学习笔记-MVC-17】Spring MVC之拦截器
    【Spring学习笔记-MVC-1.0】Spring MVC架构介绍
    【Spring学习笔记-MVC-16】Spring MVC之重定向-解决中文乱码
  • 原文地址:https://www.cnblogs.com/wdlove/p/4863909.html
Copyright © 2011-2022 走看看