页面嵌入百度地图

最新推荐文章于 2024-04-03 17:58:25 发布

chensuiji4676

最新推荐文章于 2024-04-03 17:58:25 发布

阅读量179

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：https://my.oschina.net/u/1790105/blog/638633

版权

地图可以先做好静态页面在嵌入到jsp中。

在页面上引入百度地图js文件，一般现在的html5页面最好用2.0版本的api，否则可能会出现在部分浏览器中地图出不来的情况，还有就是申请密钥

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你需要申请的密钥"></script>

html文件中的body中设置div，用来确定地图画在哪里

<span id="city" class="addrres-difang">${city }</span>
<input id="searchtext" type="text" class="wp60"  value="${street }" placeholder=""/>
<span id="searchbt" class="addrres-search" onclick="serachlocal()" style="cursor:pointer">搜索</span>
<!-- 地图填充 -->
<div style="width:600px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>

再就是写js控制百度地图的生成，和定制了

var key='你申请的百度地图密钥';
var map = new BMap.Map("map"); // 创建地图实例(注意这个map和上面那个div中的id值是一样的)   
var point; // 创建点坐标   
//这里的globalLng, globalLat是我从数据库拿来的经纬度，商户一进来如果有坐标就自动定位到自己之前设置位置，
//可以进行个判断没值就给个默认坐标值
point = new BMap.Point(globalLng, globalLat);
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图缩放级别
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());     
map.enableScrollWheelZoom();//滚轮缩放事件  
map.enableContinuousZoom(); // 开启连续缩放效果  
map.enableInertialDragging(); // 开启惯性拖拽效果
//自定义图标(覆盖物)
var customerIcon = new BMap.Icon(baseUrl + "img/baiduMap/baiduMapCustomerInco2.png", new BMap.Size(50,80));
var preMarker = new BMap.Marker(point, {icon:customerIcon});
map.addOverlay(preMarker);
//设置标注可拖拽
preMarker.enableDragging();
//跳动的动画
preMarker.setAnimation(BMAP_ANIMATION_BOUNCE);

//标注拖拽后的位置
preMarker.addEventListener("dragend", function (e) {
   //alert("当前位置：" + e.point.lng + ", " + e.point.lat);
   ajaxDragend(e.point.lng, e.point.lat);
});
function ajaxDragend(lng, lat) {
    var targetUrl='http://api.map.baidu.com/geocoder/v2/?ak='+key+'&location='+lat+','+lng+'&output=json&pois=0';
    jQuery.ajax({
        url:targetUrl,
        type:"get",
        async : false,
        dataType:'jsonp',
        beforeSend:function(){
          //alert(targetUrl);  
        },
        success:function(data,status){
            //alert(status);
            if(status=='success' && data.status==0){                
                content = "<div>地址:" + data.result.formatted_address + "</div>";
                /*content += '<form action="" method="post"><input type="hidden" name="lng" value="'
                    + data.result.location.lng+'"><input type="hidden" name="lat" value="'+data.result.location.lat 
                    + '"><input onclick="tempSaveLocation("' + data.result.formatted_address + '", "' + lng + '", "' + lat + '")" type="button" value="我在这里"></form>';*/
                content += '<input type="hidden" name="lng" value="' + data.result.location.lng+'">' 
                    + '<input type="hidden" name="lat" value="'+data.result.location.lat + '">' 
                    + '<input class="iamthere" onclick="iAmThereOfDragend(this, ' + lng + ', ' + lat + ')" type="button" value="我在这里">';
                var info=new BMap.InfoWindow(content);
                preMarker.openInfoWindow(info);
            }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            //alert(XMLHttpRequest.status);
            //alert(XMLHttpRequest.readyState);
            //alert(textStatus);
            //alert(errorThrown);
        }
    });
}

//搜索定位
function serachlocal(){
    var markerArray=new Array();
    var local = new BMap.LocalSearch(map, {     
    renderOptions: {     
        map: map,     
        //panel: "results",//结果容器id  
        autoViewport: true,   //自动结果标注  
        selectFirstResult: false   //不指定到第一个目标  
    },     
    pageCapacity: 8,
    //自定义marker事件
    onMarkersSet:function(pois){
        for(var i=0; i<pois.length; i++){
            (function(){
                var index = i;
                var curPoi = pois[i];
                var curMarker = pois[i].marker;
                markerArray[i] = curMarker;
                var content = "<h3>" + curPoi.title + "</h3>";
                //content += "<div>地址:" + curPoi.address + "</div>";
                content += '<form action="" method="post">' 
                    + '<input type="hidden" name="province" value="'+ curPoi.province + '">'
                    + '<input type="hidden" name="city" value="'+ curPoi.city + '">'
                    + '<input type="hidden" name="address" value="'+ curPoi.title + '">'
                    + '<input type="hidden" name="lng" value="'+ curPoi.point.lng + '">' 
                    + '<input type="hidden" name="lat" value="' + curPoi.point.lat+ '">' 
                    /*+ '<input onclick="tempSaveLocation(' + curPoi.province + curPoi.city + curPoi.address + ', ' + curPoi.point.lng + ', ' + curPoi.point.lat + ')" type="button" value="我在这里"></form>';*/
                    + '<input onclick="iAmThereOfSearch(this, ' + curPoi.point.lng + ', ' + curPoi.point.lat + ')" type="button" value="我在这里"></form>';
                curMarker.addEventListener('click',function(event){
                    //showAtrributes(event);
                    var info = new BMap.InfoWindow(content);
                    curMarker.openInfoWindow(info);
                    var position = curMarker.getPosition();
                    //document.getElementById("mapx").innerHTML="点击搜索图标经度:"+position.lng;  
                    //document.getElementById("mapy").innerHTML="点击搜索图标纬度:"+position.lat;  
                    //document.getElementById("level").innerHTML="缩放等级:"+this.getZoom();  
                    
                });
            })();
        }
    },
    //自定义搜索回调数据
    onSearchComplete:function(results){
        if(local.getStatus() == BMAP_STATUS_SUCCESS){
           
        }
    },
    });
    //alert(jQuery("#city").text() + document.getElementById("searchtext").value);
    local.search(jQuery("#city").text() + document.getElementById("searchtext").value);  
}

//点击拖拽事件"我在这里"(不能传中文参数,很坑爹的)
function iAmThereOfDragend(obj, lng, lat) {
    /*alert("lng : " + lng);
    alert("lat : " + lat);
    alert(jQuery(".BMap_bubble_content div").text());*/
    var location = jQuery(".BMap_bubble_content div").text();
    if (location != null && location.length != 0) {
        var locaArr = location.split(":");
//        jQuery("#storeAddress").val(locaArr[1]);
        if (locaArr[1].indexOf("市") >= 0) {
            var cityArr = locaArr[1].split("市");
            jQuery("#searchtext").val(cityArr[1]);
        }
        jQuery("#lng").text(lng);
        jQuery("#lat").text(lat);
        dialog("已更换位置：" + locaArr[1] + ", 您可通过提交修改进行保存");
    }
}
//点击搜索事件"我在这里"(不能传中文参数)
var addressOfSearch;
function iAmThereOfSearch(obj, lng, lat) {
    var province = jQuery(".BMap_bubble_content form input:eq(0)").val();
    var city = jQuery(".BMap_bubble_content form input:eq(1)").val();
    var address = jQuery(".BMap_bubble_content form input:eq(2)").val();
    /*alert(province);
    alert(city);
    alert(address);*/
    decideMunicipalities(province, city, address);
//    jQuery("#storeAddress").val(addressOfSearch);
    if (addressOfSearch.indexOf("市") >= 0) {
        var cityArr = addressOfSearch.split("市");
        jQuery("#searchtext").val(cityArr[1]);
    }
    jQuery("#lng").text(lng);
    jQuery("#lat").text(lat);
    dialog("已更换位置：" + addressOfSearch + ", 您可通过提交修改进行保存");
}
//判断省市是否是一样的(直辖市是一样的)
function decideMunicipalities(province, city, address) {
    if (province == city) {
        /*
         * 判断完直辖市(省和市相同)之后，再判断下市和街
         * eg: city : 深圳市, address : 深圳市华强北街道办
         */
        var index = address.indexOf(city);
        if (index != -1) {
            var addressArr = address.split(city);
            if (addressArr.length >= 2) {
                address = addressArr[1];
            } else {
                address = " ";
            }
        }
        addressOfSearch = address;
    } else {
        /*
         * 判断完直辖市(省和市相同)之后，再判断下市和街
         * eg: city : 深圳市, address : 深圳市华强北街道办
         */
        var index = address.indexOf(city);
        if (index != -1) {
            var addressArr = address.split(city);
            if (addressArr.length >= 2) {
                address = addressArr[1];
            } else {
                address = " ";
            }
        }
        addressOfSearch = province + city + address;
    }
}
//保存地理位置和坐标到页面上，以供修改保存使用(点击"我在这里触发")
function tempSaveLocation(address, lng, lat) {
//    jQuery("#storeAddress").val(address);
    if (address.indexOf("市") >= 0) {
        var cityArr = address.split("市");
        jQuery("#searchtext").val(cityArr[1]);
    }
    jQuery("#lng").text(lng);
    jQuery("#lat").text(lat);
    dialog("已更换位置：" + address + ", 您可通过提交修改进行保存");
}

上面一大段js核心就前面几句js，后面的一系列都是根据业务需求写的函数，还有保存坐标，判断直辖市等一系列坑爹的方法，直接复制我的代码是不能运行的，需要慢慢理解。也就是首先调用百度api申明地图（new BMap.Map("map")），再描点（var point = new BMap.Point(116.4135540000,39.9110130000); ），再做初始化地图（map.centerAndZoom(point, 15);），再申明覆盖物（var marker = new BMap.Marker(point);），再把覆盖物添加到那个point点上去（map.addOverlay(marker);）。基础差不多就这些吧。

百度有些官方示例：http://developer.baidu.com/map/jsdemo.htm#a1_2

再者就是确定员工位置了，我做的是在页面上用html5进行定位

引用的是W3C资料：http://www.w3school.com.cn/html5/html_5_geolocation.asp

var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;    
  }

有个要注意的地方，这里获取的坐标是GPS坐标，然而之前保存的商户坐标百度坐标，这两个是不同的，需要转换一下。我选择的是把员工的GPS坐标转成百度坐标再计算距离。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
var globalGPSLongitude;
var globalGPSLatitude;
var globalBaiDuLongitude;
var globalBaiDuLatitude;
BMap.Convertor.translate(new BMap.Point(globalGPSLongitude, globalGPSLatitude), 0, initMap); //转换坐标
function initMap(point){
    globalBaiDuLatitude = point.lat;
    globalBaiDuLongitude = point.lng;
}

上面的globalBaiDuLongitude, globalBaiDuLatitude是GPS坐标转换成的百度坐标。

转载于:https://my.oschina.net/u/1790105/blog/638633