• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

php 搞代码 7年前 (2018-06-21) 173次浏览 已收录 0个评论

最近在做一个网站,需要嵌入经销商的位置和信息。搜索了很多资料,终于完成了功能,给大家分享一下。
地图功能:按标尺缩放,鼠标滑动缩放,添加标注和 信息。
具体步骤:
1:首先到百度地图API,申请密钥。(如果没有百度账户得先注册一个)
2:百度地图API的功能做得比较分散,像标注、缩放等都是需要自己一步步找代码的。我把代码整理了一下,给大家复制一下,应该是最简洁的了
<head>

http://www.gaodaima.com/50816.html在网页中嵌入带标识的百度地图_php

<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&gt;
</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>

欢迎大家阅读《在网页中嵌入带标识的百度地图_php,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在网页中嵌入带标识的百度地图_php
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址