獲取百度地圖

時間 2020-10-08

標籤 javascript css html java jquery git api app dom jsp 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>javascript

<html>css

<head>html

<jsp:include page="/common/header.jsp"/>jquery

body, html {api

width: 100%;app

height: 100%;dom

overflow: hidden;jsp

margin: 0;

}

#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

}

#l-map {

height: 100%;

width: 100%;

}

</style>

</head>

<%--<script language="javascript" src="/js/chenghan.kendo.base.js"></script>--%>

var longitude=null,latitude=null,city=null,locName=null,marker=null;

function initialize() {

var map = new BMap.Map("l-map");

var lp = null;

function createMaker(point){

marker = new BMap.Marker(point);

marker.enableDragging();

map.addOverlay(marker);

}

if(longitude!=''&&latitude!=''){

lp =new BMap.Point(longitude, latitude);

map.centerAndZoom(lp, 20);

map.enableScrollWheelZoom(); //啓用滾輪放大縮小

createMaker(lp);

}else{

lp = new BMap.Point(0,0);

map.centerAndZoom(lp,12);

map.enableScrollWheelZoom();

function myFun(result) {

map.setCenter(result.name);

lp = new BMap.Point(result.center.lng, result.center.lat);

createMaker(lp);

}

var myCity = new BMap.LocalCity();

myCity.get(myFun);

}

$(document).ready(function () {

longitude = ChtUtil.getUrlParameter("longitude")||'';

latitude = ChtUtil.getUrlParameter("latitude")||'';

});

function getSelectValue() {

if(marker!=null){

var p = marker.getPosition(); //獲取marker的位置

return {longitude: p.lng,latitude: p.lat};

}

</script>

<body>

</body>

</html>

上面是location.jsp

如下是JS彈出框

function openLocationWin(title, param, width, height, isModal, left, top) {

if($("#dialog_dt").length==0){

var _dialog = $("<div id='dialog_dt' style='overflow: hidden;'><iframe name='map_iframe' style='width: 100%; height: 100%; overflow: hidden; border: 0px;' frameborder='0' src='"+param+"'></iframe></div>").appendTo("body");

// $("#dialog_dt").load(param);

$("#dialog_dt").dialog({ title: title,

width: width == undefined ? '430' :width,

height: height == undefined ? 'auto' : height,

resizable: false, //是否容許調整對話框大小

bgiframe: false,

modal: isModal == undefined ? true : false ,

position: left == undefined ? ['center'] : [left, top],

buttons: {

'肯定': function() {

var longitude = window.frames['map_iframe'].getSelectValue().longitude;

var latitude = window.frames['map_iframe'].getSelectValue().latitude;

$("#longitude").val(longitude);

$("#latitude").val(latitude);

$("#dialog_dt").dialog('close');

'取消': function() {

$("#dialog_dt").dialog('close');

}

});

}else{

$("#dialog_dt").dialog("open");

}

活動新增頁面

經度：<input id="longitude" maxlength="50" type="numric" name="longitude" value="${eventBasInfoVO.longitude}" style="width:80px;height:25px;">

緯度：<input id="latitude" maxlength="50" type="text" name="latitude" value="${eventBasInfoVO.latitude}" style="width:80px;height:25px;">

<a style="background-color:#006DCC;padding: 2px 5px;color:white;text-decoration: none;" class="upbtn_a" href="javascript:;" onclick="getMap(1)">獲取經緯度</a>

</div>

function getMap(type){

switch (type) {

case 0:

RandomPic();

break;

case 1:

openLocationWin('地圖', '<%=request.getContextPath()%>/location.do', 600, 600);

break;

}

@RequestMapping(value = "location.do")

public String getLocationIndex(ModelMap modelMap,@RequestParam(value = "longitude",required = false)BigDecimal longitude,