百度地图应用 - Githubissues

<%@page import="com.open.eac.core.app.AppHandle"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://www.open.com/eac/core/tag"%>
<%@ include file="/pages/common/common.jsp" %>

<%@page import="com.pytech.timesgp.web.helper.CommonUtil"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>

<c:set var="path" value="<%=request.getContextPath()%>"></c:set>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>客户参数设置</title>
<ui:Include tags="sigmagrid,artDialog"></ui:Include>
<link href="${path }/pages/css/custom.css" rel="stylesheet">

    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #box{ text-align: center; }
        #l-map{height:500px;width:800px; border:#ccc solid 1px;}
        #r-result{width:100%;}
    </style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript" src="js/shangban.js"></script>
<script type="text/javascript">
    var path = '${path}';
    // var map;
    var CHANNEL_ID = '${param.CHANNEL_ID}';
    var parameters = {"CHANNEL_ID":CHANNEL_ID};
    $(function(){
        var height = $(window).height()-$("#head").height();
        var width = $(window).width();
        $("#grid").height(height);
        $("#grid").width(width);
        $(window).resize(function() {
            var height = $(window).height()-$("#head").height();
            var width = $(window).width();
            $("#grid").height(height);
            $("#grid").width(width);
        });
        // 
        // 版本1
        // initMap()

        // 版本2
        // var map = new BMap.Map("map");
        // map.centerAndZoom("杭州", 11);
        // var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
        // // 左上角，添加比例尺
        // var top_left_navigation = new BMap.NavigationControl();  
        // //左上角，添加默认缩放平移控件 
        // // 标尺控件
        // map.addControl(top_left_control);
        // map.addControl(top_left_navigation);
        // $("#btn").click(function(){
        //  console.log('111', $("#address").val())
        //     setPlace($("#address").val());
        // });
        // function setPlace(value) {
        //     var local, point, marker = null;
        //     local = new BMap.LocalSearch(map, { //智能搜索
        //         onSearchComplete: fn
        //     });

        //     local.search(value);
        //     function fn() {
        //         //如果搜索的有结果
        //         if(local.getResults() != undefined) {
        //             map.clearOverlays(); //清除地图上所有覆盖物
        //             if(local.getResults().getPoi(0)) {
        //                 point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        //                 map.centerAndZoom(point, 18);
        //                 marker = new BMap.Marker(point); // 创建标注
        //                 map.addOverlay(marker); // 将标注添加到地图中
        //                 marker.enableDragging(); // 可拖拽
        //                 alert("当前定位经度:"+point.lng+"纬度:"+point.lat);
        //             } else {
        //                 alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
        //             }
        //         } else {
        //             alert("未找到搜索结果")
        //         }
        //     }
        // }

        // 版本3
        var map = new BMap.Map("l-map");
        map.centerAndZoom("广州", 12);// 初始化地图,设置城市和地图级别。
        // 左上角，添加比例尺
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
        var top_left_navigation = new BMap.NavigationControl(); // 标尺控件
        var overView = new BMap.OverviewMapControl(); // 添加缩略图
        var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
        var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});
        var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
        // map.addControl(top_left_control);
        // map.addControl(top_left_navigation);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(overView);          //添加默认缩略地图控件
        map.addControl(overViewOpen);
        map.addControl(mapType1);          //2D图，卫星图
        map.addControl(mapType2);          //左上角，默认地图控件

        var ac = new BMap.Autocomplete(//建立一个自动完成的对象
            {"input" : "suggestId"
            ,"location" : map
        });

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }    
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }    
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            setPlace();
        });

        function G(id) {
            return document.getElementById(id);
        }

        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
        }

    });

    // 版本1
    // //创建和初始化地图函数：
 //    function initMap(){
 //      createMap();//创建地图
 //      setMapEvent();//设置地图事件
 //      addMapControl();//向地图添加控件
 //      addMapOverlay();//向地图添加覆盖物
 //    }
 //    function createMap(){ 
 //      map = new BMap.Map("map"); 
 //      map.centerAndZoom(new BMap.Point(114.007626,38.112132),8);
 //    }
 //    function setMapEvent(){
 //      map.enableScrollWheelZoom();
 //      map.enableKeyboard();
 //      map.enableDragging();
 //      map.enableDoubleClickZoom()
 //    }
 //    function addClickHandler(target,window){
 //      target.addEventListener("click",function(){
 //        target.openInfoWindow(window);
 //      });
 //    }
 //    function addMapOverlay(){
 //    }
 //    //向地图添加控件
 //    function addMapControl(){
      // var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      // scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      // map.addControl(scaleControl);
      // var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      // map.addControl(navControl);
      // var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      // map.addControl(overviewControl);
 //    }
    // var map;
    // initMap();

</script>
<script type="text/javascript">

</script>
</head>
<body>
    <form action="" id="" style="display: none">
    </form>
    <div id="baseContainer" style="overflow: hidden;">
        <div id="content" style="float: left;">
            <div id="head">
                <div style="height: 25px"></div>
                <form action="" id="queryForm">
                    <!-- <input type="text" id="address"> -->
                    <!-- <button id="btn">搜索</button> -->
                    <table>
                        <tr>
                            <div id="r-result">
                                请输入:
                                <input type="text" id="suggestId" size="20" value="百度" style="width:150px;" />
                            </div>
                            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                            <!-- <td>参数名称:</td> -->
                            <!-- <td><ui:TextBox id="CHANNEL_NAME"></ui:TextBox></td> -->
                            <!-- <td>
                                <input id="suggestId">
                                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                            </td> -->
                            <!-- <td>
                                <input type="text" id="address">
                                <button id="btn">搜索</button>    
                            </td> -->
                            <!-- <td>
                                <ui:Button id="btn" btnType="query" onClick="query()">查询</ui:Button>
                            </td> -->
                        </tr>
                    </table>
                </form>
                <div style="height: 18px"></div>
            </div>
            <div id="box">
                <!-- <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div> -->

                <div id="l-map"></div>

            </div>
    </div>
</body>
</html>
mcya / JavaScriptExperience

百度地图应用 #7

mcya / JavaScriptExperience

百度地图 应用 #7

百度地图应用 #7
