自己在做个电子请帖要嵌入一个地图手机上使用的,首先想到就是百度地图,很早的时候就做个百度翻译的api,开发者认定就已经通过了,怎么申请key请看下面的文章,讲的应该比较详细 http://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html
我主要用于网站,选择的时候是百度地图JavaScript 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
查看原文:http://www.phpsong.com/1476.html
网站嵌入百度地图API实例
最新推荐文章于 2023-06-15 14:36:39 发布