如果在百度地图扫一扫在哪里上想查一个人在哪里怎么做

  上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?"
  答案就是,利用百度地图上的数据。
----------------------------------------------------------------------------------------------
我们不用花大把时间写代码去跑数据,只需要利用百度地图API提供的免费接口,就可以快速完成这一功能。
查看示例,请点击。
-----------------------------------------------------------------------------------------------
一、建立不同的查询按钮
  还是以招商银行,中国银行和建设银行三个为例,建立三个不同的查询按钮。我想用最直观的展现方式来教学,所以使用了三个按钮。当然,你也可以建立一个下拉列表,或者一个输入框来传参数。html代码如下:
&input type="button" onclick="milk_zs();" value="招商银行" /&&input type="button" onclick="milk_zg();" value="中国银行" /&&input type="button" onclick="milk_js();" value="建设银行" /&
  针对这三个按钮,写三个不同的查询。
function milk_zs(){
local.search('招商银行');}function milk_zg(){
local.search('中国银行');}function milk_js(){
local.search('建设银行');}
  如何定义三个不同的标注,在已经讲过了,我这里就不重复了。下面进入重点部分!!
二、利用百度地图数据库
  由于我们要将从百度地图查询出来的数据,显示成自己定义的标注,那么就需要使用到回调函数。经过查询,LocalSearch的回调函数是searchComplete。用法如下:
var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});
//构造一个查询
  接下来,我们要将在回调函数里进行操作。遍历所有查询到的坐标点,读一个获取的点,就自己添加一个自定义标注。读点,使用的是getCurrentNumPois接口。
//查询完毕的回调函数var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
for(var cnt = 0; cnt & results.getCurrentNumPois(); cnt++){
var point = results.getPoi(cnt);
addMarker(results,point, cnt);
  为了让代码看上去更加清晰,我把添加自定义标注的代码提取出来,单独写成一个函数addMarker。在这里,需要针对不同的查询,显示不同的标注图案。所以,需要判断一下关键词。
var myIcon = "";
if(results.keyword == "招商银行"){
myIcon = zsI
}else if(results.keyword == "中国银行"){
myIcon = zgI
}else if(results.keyword == "建设银行"){
myIcon = jsI
myIcon = zsI
}var marker = new BMap.Marker(point.point, {icon: myIcon});map.addOverlay(marker);
三、细节完善
  为了便于观察结果和更好的用户体验,需要在第二次查询时,清除上一次查询的结果。
map.clearOverlays();
//清除地图上覆盖物
  点击marker需要弹出infowindow,这里要设置一下。以前写过这个点,这里就不多说了。
-------------------------
运行代码,请点击。
最后,贴出全部源代码,供大家下载。
&html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&三家银行搜索&/title&&script type="text/javascript" src="http://api./api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true"&&/script&&/head&&body&&div style="width:520height:340border:1px solid gray" id="container"&&/div&&input type="button" onclick="milk_zs();" value="招商银行" /&&input type="button" onclick="milk_zg();" value="中国银行" /&&input type="button" onclick="milk_js();" value="建设银行" /&&/body&&/html&&script type="text/javascript"&//查询完毕添加自定义标注function addMarker(results,point, index){
// 创建招商银行的标注图标
var zsIcon = new BMap.Icon("/baidumap/bank/marker.gif",
//图片地址
new BMap.Size(40, 64),
// 标注显示大小
offset: new BMap.Size(20, 64),
// 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(0, 0)
// 这里相当于CSS sprites
// 创建中国银行的标注图标
var zgIcon = new BMap.Icon("/baidumap/bank/marker.gif",
//图片地址
new BMap.Size(40, 64),
// 标注显示大小
offset: new BMap.Size(20, 64),
// 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(0, -64)
// 这里相当于CSS sprites
// 创建建设银行的标注图标
var jsIcon = new BMap.Icon("/baidumap/bank/marker.gif",
//图片地址
new BMap.Size(40, 64),
// 标注显示大小
offset: new BMap.Size(20, 64),
// 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(0, -128)
// 这里相当于CSS sprites
var myIcon = "";
if(results.keyword == "招商银行"){
myIcon = zsI
}else if(results.keyword == "中国银行"){
myIcon = zgI
}else if(results.keyword == "建设银行"){
myIcon = jsI
myIcon = zsI
var marker = new BMap.Marker(point.point, {icon: myIcon});
var infoWindow = new Window(point.title);
// 创建信息窗口对象
marker.addEventListener("click",
function(){
marker.openInfoWindow(infoWindow);
map.addOverlay(marker);}//查询完毕的回调函数var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
for(var cnt = 0; cnt & results.getCurrentNumPois(); cnt++){
var point = results.getPoi(cnt);
addMarker(results,point, cnt);
}}var map = new BMap.Map("container");
//创建地图容器map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //初始化地图var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});
//构造一个查询//定义三个不同的查询function milk_zs(){
map.clearOverlays();
local.search('招商银行');}function milk_zg(){
map.clearOverlays();
local.search('中国银行');}function milk_js(){
map.clearOverlays();
local.search('建设银行');}&/script&
阅读(...) 评论()【图文】怎样使大家在百度地图中搜索到自己的店铺_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
评价文档:
怎样使大家在百度地图中搜索到自己的店铺
上传于||暂无简介
大小:934.00KB
登录百度文库,专享文档复制特权,财富值每天免费拿!
你可能喜欢

我要回帖

更多关于 百度地图热力图在哪里 的文章

 

随机推荐