百度地图获取数据库点的坐标，并定时刷新到页面上 jsp
2024-06-08 14:09:40
前台JSP页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图</title> <link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script><style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:90%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP">
</script>
<script type="text/javascript">
var markers = [];
$(document).ready(function() {getdata();initMap();setInterval("frash()",3000); });function frash(){map.clearOverlays();//清空地图上标注点getdata();addMapOverlay();markers.splice(0,markers.length);//清空数组
}function getdata(){$.ajax({url:"dituList.do",type:"post",success:function(data){$.each(data,function(i,d){markers[i]={position:{lat:d.jd,lng:d.wd}};});}});
}</script></head><body>
<!-- <form action="dituSave.do" method="post">
<div class="form-group">
<label>经度</label>
<input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%">
</div><div class="form-group">
<label>纬度</label>
<input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%">
</div><div>
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong>
</button></div></form>--><!--百度地图容器--><div style="width:100%;height:100%;border:#ccc solid 1px;font-size:12px" id="map"></div></body><script type="text/javascript">//创建和初始化地图函数：function initMap(){//alert("111"+markers[1].position.lat);createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMapOverlay();//向地图添加覆盖物}function createMap(){ map = new BMap.Map("map"); //建树Map实例map.centerAndZoom(new BMap.Point(118.059014,36.812474),13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。}function setMapEvent(){map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableKeyboard();//启用键盘上下左右键移动地图map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)}function addClickHandler(target,window){target.addEventListener("click",function(){target.openInfoWindow(window);});}//设置点Iconfunction addMapOverlay(){//alert(markers.length+"22222");//alert(markers[1].position.lat+"33333");/* var markers = [{position:{lat:36.79,lng:118.06}},{position:{lat:36.81,lng:118.06}},{position:{lat:36.81,lng:118.04}},{position:{lat:36.81,lng:118.05}}];alert(markers);*/for(var index = 0; index < markers.length; index++ ){var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25)// imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height))});// var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});// var opts = {// width: 200,// title: markers[index].title,// enableMessage: false// };// var infoWindow = new BMap.InfoWindow(markers[index].content,opts);// marker.setLabel(label);//显示地理名称marker.setLabel();//不显示地理名称 // addClickHandler(marker,infoWindow);map.addOverlay(marker);};}//向地图添加控件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>
</html>百度地图获取数据库点的坐标，并定时刷新到页面上 jsp相关推荐
- 百度地图获取数据库点的坐标，并定时刷新到页面上，功能一
后台代码 先创建marker点的实体类(并利用Spring注解功能实现自动自动建表) 1 package com.sdtg.ditu.bean; 2 3 import javax.persistenc ...
- vue使用百度地图获取可视区域四角坐标（百度地图四角坐标，百度地图3D可视区域四角坐标）
百度地图api只提供了左下角和右上角两个坐标,左上角坐标和右下角坐标需要自己操作获取,方法如下: 地图自带获取坐标的方法:var bounds = map.getBounds(); //获取地图可视区 ...
- 百度地图获取数据库经纬度进行地图标点（django）
一.views.py中写个loadpoint的方法 def loadpoint(request):response={}try:loadpoint=models.Potsc.objects.all() ...
- 根据ip获取经纬度_PHP使用百度地图获取指定地址坐标：创建AK（图文+视频）
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...
- 根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标：经纬度（图文+视频）...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
- 百度地图 获取两坐标点之间的驾车路线所有坐标
百度地图 获取两坐标点之间的驾车路线所有坐标 <html><head><meta http-equiv="Content-Type" content= ...
- android 百度地图拖动定位,百度地图获取定位，实现拖动marker定位，返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...
- android百度地图定位自定义图标,百度地图SDK集成及根据坐标实现定位(android studio开发)...
百度地图SDK集成及根据坐标实现定位(android studio开发) 百度地图SDK集成及根据坐标实现定位(android studio开发) 1.下载百度地图SDK 链接:http://lbsy ...
- PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例
PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程 ...
最新文章
- 厦门“快捷贷”项目启动 最高可贷500万
- 如何阅读AI顶会论文，搭建深度学习知识体系框架？
- 淮阴工学院计算机学院机房,实验室开放
- Python基础入门知识点——Python中的异常
- Bootstrap 徽章 badge
- 阿里巴巴Java开发 之 编程规约
- 分布式自增ID算法---雪花算法 (snowflake，Java版)---算法001
- 跑monkey需要安装什么_智能门锁安装时需要注意什么?
- python怎么恢复默认窗口_如何恢复python编程环境spyder的窗口？
- Caffe模型详细介绍
- sql server 2000（迷你sql2000） jdbc驱动
- 中标麒麟桌面版7.0（NeoKylin linux desktop release 7.0）配置pyqt5运行环境说明
- 从零开始学习CANoe（六）—— CAPL 测试节点
- java调用万网域名接口
- 国内的虚拟服务器推荐,虚拟空间哪个好（国内比较的几款虚拟主机推荐）
- seaborn中sns.distplot图例显示方法及无法显示的解决办法
- Matlab中filter.m和filtfilt.m函数C语言实现
- Python re模块 （正则表达式用法剖析详解）
- CCSP201902纸牌计数——解题报告
- 信号与系统——信号的分解