如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 原文:如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… --------------------------------------------------------- 一、先按照前两篇文章那样,做好静态文件。
原文: 如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库

摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章……

---------------------------------------------------------

一、先按照前两篇文章那样,做好静态文件。

请看两篇文章:

1、制作自定义标注和自定义信息窗口 http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html

2、使用右侧列表打开信息窗口 http://www.cnblogs.com/milkmap/archive/2011/08/09/2132308.html

二、建立自己的数据库。

需要存入以下信息:经纬度、名称、地址、电话、价格等。

API爱好者们还可以添加其他数据,按照相同的办法储存和读取。

1. 创建数据表:y_map

SQL语句:

CREATE TABLE IF NOT EXISTS `y_map` (
`id`
int(11) NOT NULL,
`point`
varchar(128) NOT NULL,
`title`
varchar(128) NOT NULL,
`address`
varchar(128) NOT NULL,
`price`
float NOT NULL,
`tel`
varchar(20) NOT NULL,
`
level` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE
=InnoDB DEFAULT CHARSET=utf8;

来看一下创建好的数据库。

2. 插入数据

这里我插入了十条自己的数据。名称地址电话价格,我还放了评价。用level来表示。level为5,评价就有5颗星。

id是顺序插入的。

point,请用坐标拾取工具,拾取百度坐标:http://dev.baidu.com/wiki/static/map/API/tool/getPoint/



SQL语句:

INSERT INTO `y_map` (`id`, `point`, `title`, `address`, `price`, `tel`, `level`) VALUES
(
0, '116.411776,39.942833', '如家快捷酒店', '北京市朝阳区高碑店小学旁', 120, '010-59921010', 5),
(
1, '116.320791,40.003682', '昆仑大厦', '北京市海淀区紫竹院123号', 2370, '010-59921010', 4),
(
2, '116.275186,39.896095', '华夏银行', '北京市海淀区紫竹院123号', 50, '010-59921010', 4),
(
3, '116.425098,39.946249', '成都小吃', '北京市海淀区紫竹院123号', 16, '010-59921010', 4),
(
4, '116.359823,39.984761', '锦绣大饭店', '北京市朝阳区高碑店小学旁', 300, '010-59921010', 5),
(
5, '116.316479,39.98323', '七天快捷酒店', '北京市大钟寺沧澜大厦', 180, '010-59921010', 5),
(
6, '116.385986,39.946124', '中央民族大学', '北京市朝阳区高碑店小学旁', 9, '010-59921010', 3),
(
7, '116.427545,40.00796', '昌平汽车专修学院', '北京市哇哈哈路鲜鱼一条街', 3300, '010-59921010', 3),
(
8, '116.446965,39.911603', '百度大厦', '北京市朝阳区高碑店小学旁', 20, '010-59921010', 3),
(
9, '116.454579,39.946652', '海尔电器销售点', '北京市朝阳区高碑店小学旁', 1000, '010-59921010', 3);

  

来看一下数据库的样子:

三、如何改HTM为PHP,并结合数据库?

1、数据库连接

/**
* 连接数据库
*/

$mysql_server_name
="localhost"; // 数据库服务器名称
$mysql_username
="root"; // 连接数据库用户名
$mysql_password
="root"; // 连接数据库密码
$mysql_database
="map"; // 数据库的名字

// 连接到数据库
$conn
=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or die("Could not connect: ".mysql_error());

// 从表中提取信息的sql语句
$strsql
="select * from y_map";
// 执行sql查询
$result
=mysql_db_query($mysql_database, $strsql, $conn);

  

2、如何获取查询结果?

在这里,定义了标注、图片、信息窗口内容,以及经纬度数组。

// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
$i = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '<li>
<span style="float:right;">
'.$row["price"].'元</span>
<a onmouseover="openMyWin(infoWindow
'.$i.',point['.$i.'])" href="#">'.$row['title'].'</a>
</li>
';

$arr_point .= 'new BMap.Point('.$row["point"].'),';
$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});';
$addverlay .= 'map.addOverlay(marker'.$i.');';
$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'<span style="font-size:14px;color:#0A8021">'.$row['title'].'</span>\'};';
for($m = 0;$m < $row["level"];$m++)
{
$img .= "<img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' />";
}
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>".$row['address']."</br><b>电话:</b>010-59921010</br><b>口碑:</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$i++;
}
$arr_point = substr($arr_point , 0 , -1).']';
?>

  

3、定义好信息后,需要把js用php语句拼起来。

拼接字符串时,注意要保持与静态文件里js的代码一致。

<?php
echo '<script> var point = '.$arr_point.'; '; // 坐标点
echo $maker; // 创建标注
echo $addverlay; // 将标注添加到地图中
echo 'map.setViewport(point); '; // 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' </script> '
?>

  

这样,就可以自动循环,从自己的数据库里,读取数据了。

信息窗口内容,也是自己定义的。

四、全部源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>酷讯酒店地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style type="text/css">
a{text
-decoration:none;color:#6ce;font-size:14px;}
a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div style="float:left;width:520px;height:340px;border:1px solid gray" id="container"></div>
<div style="float:left;width:200px;height:340px;border:1px solid gray;border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8em;">
<ul>
<?php

/**
* 连接数据库
*/

$mysql_server_name="localhost"; // 数据库服务器名称
$mysql_username="root"; // 连接数据库用户名
$mysql_password="root"; // 连接数据库密码
$mysql_database="map"; // 数据库的名字

// 连接到数据库

$conn=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or
die("Could not connect: ".mysql_error());

// 从表中提取信息的sql语句
$strsql="select * from y_map";
// 执行sql查询
$result=mysql_db_query($mysql_database, $strsql, $conn);

// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
$i = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '<li>
<span style="float:right;">
'.$row["price"].'元</span>
<a onmouseover="openMyWin(infoWindow
'.$i.',point['.$i.'])" href="#">'.$row['title'].'</a>
</li>
';

$arr_point .= 'new BMap.Point('.$row["point"].'),';

$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});';

$addverlay .= 'map.addOverlay(marker'.$i.');';

$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'<span style="font-size:14px;color:#0A8021">'.$row['title'].'</span>\'};';
for($m = 0;$m < $row["level"];$m++)
{
$img .= "<img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' />";
}
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>".$row['address']."</br><b>电话:</b>010-59921010</br><b>口碑:</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$i++;
}
$arr_point = substr($arr_point , 0 , -1).']';
?>

</ul>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map
.centerAndZoom(point, 14);
var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(32, 70), { //小车图片
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
</script>

<?php
echo '<script> var point = '.$arr_point.'; '; // 坐标点
echo $maker; // 创建标注
echo $addverlay; // 将标注添加到地图中
echo 'map.setViewport(point); '; // 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' </script> '
?>

<script>
function openMyWin(id,p){
map
.openInfoWindow(id,p);
}
</script>

  

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
3月前
|
API Java 数据库连接
从平凡到卓越:Hibernate Criteria API 让你的数据库查询瞬间高大上,彻底告别复杂SQL!
【8月更文挑战第31天】构建复杂查询是数据库应用开发中的常见需求。Hibernate 的 Criteria API 以其强大和灵活的特点,允许开发者以面向对象的方式构建查询逻辑,同时具备 SQL 的表达力。本文将介绍 Criteria API 的基本用法并通过示例展示其实际应用。此 API 通过 API 构建查询条件而非直接编写查询语句,提高了代码的可读性和安全性。无论是简单的条件过滤还是复杂的分页和连接查询,Criteria API 均能胜任,有助于提升开发效率和应用的健壮性。
87 0
|
3月前
|
SQL Shell API
python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API
python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API
|
4月前
|
开发框架 缓存 NoSQL
基于SqlSugar的数据库访问处理的封装,在.net6框架的Web API上开发应用
基于SqlSugar的数据库访问处理的封装,在.net6框架的Web API上开发应用
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
59 0
|
3月前
|
存储 开发框架 .NET
ASP.NET Web Api 使用 EF 6,DateTime 字段如何取数据库服务器当前时间
ASP.NET Web Api 使用 EF 6,DateTime 字段如何取数据库服务器当前时间
|
4月前
|
数据可视化 安全 API
数据库开放权限风险高,API非唯一选择:DataV为您开启安全高效的数据可视化之旅
良好的用户体验:DataV注重用户体验设计,提供了丰富的交互效果和动画效果,使得数据可视化大屏更加生动、吸引人。这有助于提升用户的参与度和满意度,促进数据的广泛应用
|
4月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
220 0
|
5月前
|
DataWorks Oracle 数据库连接
DataWorks产品使用合集之如何实现数据集成接入提供ODBC API的Oracle数据库
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
53 0
|
5月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
411 0
|
5月前
|
Java API Apache
详尽分享百度翻译api
详尽分享百度翻译api
101 0