百度地图API 搞定

光明使者 · 发表于 2013-4-1 20:40:37

最近在用百度地图，所以看了看百度地图API的一些方法，在朋友的帮助下，完成了一个。

查询自己的数据表，然后把相关的地址标注在地图上。

下面的方法我模拟了两条数据。没有查询数据表。在使用的时候把查询出来的二维数组，传送到JS里接受即可。（用JSON传），如有好的方法提出来共同学习

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>批量地址</title>
<style type="text/css">
#l-map{height:473px;width:530px;margin:0;padding:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<div id="l-map"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.331398,39.897445), 10);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用。
map.setCenter("北京市");
var index = 0;
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
var adds=new Array();
adds =[
["北京市海淀区知春东里14号","人民ZF机关幼儿园"],
["北京市顺义区天竺开发区安华街9号","北京市新英才学校幼儿园"]
];
geocodeSearch(adds);
function geocodeSearch(adds){
for(var i=0;i<adds.length;i++){
var adds_link=new Array();
adds_link=adds[i];
// 将地址解析结果显示在地图上,并调整地图视野
biaozhu(adds_link);
}
}
function biaozhu(adds_link){
//<span style="font-size:14px;color:#0A8021"><a href="http://www.baidu.com">'+adds_link[1]+'</a></span>
myGeo.getPoint(adds_link[0], function(point){
if (point) {
var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
map.addOverlay(marker);
var opts = {
title : '<a href="###" title="http://www.baidus4.com" onclick="getUrl(this.title);">'+adds_link[1]+'</a>'// 信息窗口标题
}
var infoWindow =new BMap.InfoWindow(adds_link[0], opts); // 创建信息窗口对象
marker.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow);});
}
}, "北京市");
}
function getUrl(url)
{
alert(url);
window.location = url;
}
</script>

复制代码

		自动登录	找回密码
密码			立即注册

[教程] 百度地图API 搞定

浏览过的版块

站长推荐 /1