js 添加地图插件

最新推荐文章于 2025-07-17 12:03:34 发布

伏特加的滋味

最新推荐文章于 2025-07-17 12:03:34 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript/jquery

本文链接：https://blog.youkuaiyun.com/yuanyuan214365/article/details/75635460

javaScript/jquery 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了如何在网页中使用百度地图API显示指定位置的地图，包括引入API、设置地图中心点及缩放级别等步骤，并提供了添加位置图标的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：页面上插入地图API，能够显示需要显示的位置

1、引入api插件：

2、地图显示的位置：

3、引入js代码

<script type="text/javascript">
	 // 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(120.19, 30.26), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.setCurrentCity("浙江");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放 
</script>

这样就可以啦

拓展：能够显示位置图标

                var map = new BMap.Map("allmap");    // 创建Map实例
        	map.centerAndZoom(new BMap.Point(result[0].longitude, result[0].latitude), 16);  // 初始化地图,设置中心点坐标和地图级别
        	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        	//map.setCurrentCity("浙江");          // 设置地图显示的城市 此项是必须设置的
        	var myIcon = new BMap.Icon("${context.ctx!}/resource/img/markers.png", new BMap.Size(23, 25), {
                // 指定定位位置
               offset: new BMap.Size(10, 25),
                // 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置   
                imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移  
               });
       
        	var point = new BMap.Point(result[0].longitude, result[0].latitude);
                // 创建标注对象并添加到地图 
                var marker = new BMap.Marker(point,{icon: myIcon});
            
        	map.addOverlay(marker);
        	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

位置图标的图片效果图