最新消息:欢迎加入小松的QQ群一起讨论一起学习,搜索页面修改成lua+ElasticSearch,使用php这个页面速度相对慢一点,优化之后速度杠杠的,如有问题请加群联系我

网站嵌入百度地图API实例

前端技术 1197浏览 0评论

自己在做个电子请帖要嵌入一个地图手机上使用的,首先想到就是百度地图,很早的时候就做个百度翻译的api,开发者认定就已经通过了,怎么申请key请看下面的文章,讲的应该比较详细
http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html

我主要用于网站,选择的时候是百度地图JavaScript API

网站嵌入百度地图API实例

在【功能介绍】里随便点击一进去就会有demo代码很方便,而且可以在线调试。
我主要用到2个功能
1、添加复杂内容的信息窗口
2、添加多个标注点

还会使用到一个重要的工具定位成坐标
http://api.map.baidu.com/lbsapi/getpoint/index.html
重要提示:百度设置里都是根据坐标来定位的

下面我把做的功能demo做出来

<script type="text/javascript">
//百度地图API功能
function loadJScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://api.map.baidu.com/api?v=2.0&ak=【百度地图key】&callback=init";
  document.body.appendChild(script);
}
function init() {
  var sContent = document.getElementById('J_map_content').innerHTML;//【提示的html代码】
  var sContent1 = document.getElementById('J_map_content1').innerHTML;//【提示的html代码】

  // 百度地图API功能
  map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(121.065592, 30.204504), 15);
  var data_info = [[122.066592, 30.204504,sContent],
    [122.060185, 30.208379,sContent1]
  ];
  var opts = {
    //width : 250, // 信息窗口宽度
    //height: 80, // 信息窗口高度
    //title : "信息窗口" , // 信息窗口标题
    enableMessage:true//设置允许信息窗发送短息
  };
  for(var i=0;i<data_info.length;i++){
    var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); // 创建标注
    var content = data_info[i][2];
    map.addOverlay(marker); // 将标注添加到地图中

    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    addClickHandler(content,marker);
  }
  function addClickHandler(content,marker){

    marker.addEventListener("click",function(e){
    openInfo(content,e)}
    );
  }
  function openInfo(content,e){
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
    infoWindow.show();
    map.openInfoWindow(infoWindow,point); //开启信息窗口

  }
}
window.onload = loadJScript; //异步加载地图
</script>

注意上面的代码要修改4处地方
①百度地图key
②【提示的html代码】
③【提示的html代码】
④坐标修改

我之前看到过别人的地址,发现打开地址就可以显示信息窗口,我在网上查了很久没有找到解决方法,做为一个问题先记录了,如果有知道的朋友留言给我

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» 网站嵌入百度地图API实例
本文链接地址:https://www.phpsong.com/1476.html

发表我的评论
取消评论
表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (3)

加载中,请稍候...
  1. 专业、明了,学习了! :oops:
    大学问社区2年前 (2015-10-26)回复
  2. 界面很舒服
    harries2年前 (2015-11-02)回复
    • 欢迎来访
      小松2年前 (2015-11-03)回复