向网页中插入百度地图

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

实例图片：

 

代码如下：

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>