Html实现百度地图地图点击事件及移动标记物

最新推荐文章于 2024-04-30 16:59:14 发布

夏小白.

最新推荐文章于 2024-04-30 16:59:14 发布

阅读量1.2k

点赞数

分类专栏：百度地图文章标签： html

本文链接：https://blog.csdn.net/xia1140418216/article/details/108132735

版权

百度地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

  <!DOCTYPE html>
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow:   hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=A30zzID7Nm83tGTTjgegr7IbzIOSjCYA"></script>
<title>地图展示</title>
  </head>
 <body>
<div id="allmap" style="width:1000px; height: 800px;"></div>
  </body>
  </html>
 <script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例


var point = new BMap.Point(116.404, 39.915);//定义坐标

map.centerAndZoom(point, 11);  // 初始化地图,设置中心点坐标和地图级别  1-19

//创建一个标记物 

var marker = new BMap.Marker(point);  // 创建标注

map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画



//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
	mapTypes:[
        BMAP_NORMAL_MAP,	//默认样式
        BMAP_HYBRID_MAP		//混合样式
    ]}));
    

//给地图本身加入点击事件
map.addEventListener("click",showInfo);

function showInfo(e){
	map.clearOverlays();//移除原有的 mark
	
	//拿到新的经纬度
	var lng = e.point.lng;
	var lat = e.point.lat;
	
	
	
	map.addOverlay(new BMap.Marker(new BMap.Point(lng, lat)));
}
    
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


 </script>