在网页中嵌入带标识的百度地图

最近在做一个网站，需要嵌入经销商的位置和信息。搜索了很多资料，终于完成了功能，给大家分享一下。
地图功能：按标尺缩放，鼠标滑动缩放，添加标注和信息。
具体步骤：
1：首先到百度地图API，申请密钥。（如果没有百度账户得先注册一个）
2：百度地图API的功能做得比较分散，像标注、缩放等都是需要自己一步步找代码的。我把代码整理了一下，给大家复制一下，应该是最简洁的了
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=申请的密钥"></script>
</head>
<body>
<div style="width:500px;height:500px;margin:0 auto" id="allmap"></div>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.384, 39.987);  // 需要标注的位置的经纬度
    map.centerAndZoom(point, 15);  // 中心位置和缩放倍数
    map.enableScrollWheelZoom();   // 添加滚动轴
    map.addControl(new BMap.NavigationControl());   // 添加左上角的标尺工具
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("北京");

    var opts = {
         width : 200,     // 信息窗口宽度
        height: 20,     // 信息窗口高度
         title : "健翔桥东华亭家园"  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("xxx公司", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
    var marker = new BMap.Marker(point);        // 创建标注,即地图上的小红点
    map.addOverlay(marker);
</script>

时间： 2024-09-18 23:13:09

在网页中嵌入带标识的百度地图

在网页中嵌入带标识的百度地图的相关文章

jsp 网站开发-网页中嵌入百度地图的问题

服务器-关于网页中嵌入视频播放插件的问题

filename-在网页中嵌入windows media player播放器的问题

本地运行网页中嵌入的Java applet

网页中嵌入 Flash 的方法讨论

技巧文章：网页中嵌入Flash的方法讨论

在网页中嵌入Base64编码文件

网页中嵌入Flash的方法讨论_Flash教程

网页中嵌入excel的解决方案