百度地图开发,实现鼠标悬浮事件以及点击事件
来源:互联网 发布:单片机最小系统各数值 编辑:程序博客网 时间:2024/04/30 14:37
下面是详细的代码:
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /><meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /><title>百度地图API自定义地图</title><!--引用百度地图API--><style type="text/css"> html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的ak码"></script></head><body> <div style="margin-left:670px;margin-top:60px;"><span style="font-size:30px;">地图信息</span></div> <!--百度地图容器--> <div style="width:697px;height:550px;border:#ccc solid 1px;margin:auto;padding:0px;margin-top:40px;" id="dituContent"></div></body><script type="text/javascript"> //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 } //创建地图函数: function createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(103.833724,36.065339);//定义一个中心点坐标 map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中//设置弹出框var marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中var opts = {width : 200, // 信息窗口宽度height: 100, // 信息窗口高度title : "实时数据" , // 信息窗口标题}var infoWindow = new BMap.InfoWindow("666666666666666", opts); // 创建信息窗口对象 marker.addEventListener("mouseover", function(){ map.openInfoWindow(infoWindow,point); //开启信息窗口});marker.addEventListener("mouseout", function(){ map.closeInfoWindow(infoWindow,point); //开启信息窗口}); window.map = map;//将map变量存储在全局} //地图事件设置函数: function setMapEvent(){ map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数: function addMapControl(){ //向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav); //向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca); } //鼠标单击事件函数 function showInfo(e){window.location.href="http://www.baidu.com";} initMap();//创建和初始化地图//鼠标单击事件map.addEventListener("click", showInfo);</script></html></span>
运行效果图:
0 0
- 百度地图开发,实现鼠标悬浮事件以及点击事件
- 百度地图开发,实现鼠标悬浮时间以及点击事件
- 百度地图-点击事件问题
- 百度地图PopupOverlay点击事件
- 百度地图-点击事件问题
- 百度地图定位图层,以及覆盖物点击事件
- Imageview在百度地图中实现点击事件
- 百度地图几个常用的鼠标事件
- Android之3.5版的百度地图的定位、覆盖物实现以及覆盖物的点击事件
- iOS 自定义百度地图大头针点击事件
- 关于百度地图marker的点击事件
- jQyery 隔行换色以及鼠标悬浮单击变色事件
- android 百度地图定位与覆盖物的添加,以及他们的点击事件
- android集成百度地图定位、poi检索、marker标记功能,以及marker点击事件
- 鼠标事件,显示悬浮窗
- 百度地图根据坐标自定义覆盖物,并实现其点击事件
- list control实现鼠标点击事件以及edit box实现只读
- 百度地图操作label 鼠标滑动事件显示、隐藏
- 【SWUSTOJ】1003: 你来做裁判(排序)
- ubuntu 命令记录
- CodeForces 24A Ring road(dfs)
- 2016SDAU课程练习三1006
- 使用jQuery实现input的灰色提示信息
- 百度地图开发,实现鼠标悬浮事件以及点击事件
- 撸个服务端出来系列(一)
- CodeForces 24B F1 Champions(排序)
- 大话设计模式-第03章 拍摄UFO-单一职责原则
- 如何找出数组中只出现一次的数字
- TCP/UDP简单介绍及JavaSocket的使用
- RMQ问题
- js中控制图片的循环播放
- NIM游戏