向网页中插入百度地图

本文详细介绍了如何使用百度地图API实现自动定位至指定位置,并展示了如何通过代码控制地图的缩放和平移。此外,还提供了地址解析和在地图上显示标记的具体实现方法。

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

功能说明:自动定位到客户所在位置,可用鼠标滚轮放大缩小,可拖动地图

实例图片:

 

代码如下:

1.在head部分插入

<!--百度地图相关-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#allmap {width: 100%;height:500px;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D233382db800044ba5915ab2ffaae458"></script>
<!--百度地图相关-->

2.在需要插入地图的地方插入代码

<div id="allmap"></div>

 

3.在/html标签下面插入代码

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(119.559332,39.93757);
map.centerAndZoom(point,18);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("秦皇岛开发区太行山路22号", function(point){
  if (point) {
    map.centerAndZoom(point, 18);
    map.addOverlay(new BMap.Marker(point));
    map.enableScrollWheelZoom();
  }

}, "秦皇岛市");
</script>

 

转载于:https://www.cnblogs.com/shanmao/p/3507226.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值