百度地图API 添加自定义标注 多点标注

原文:百度地图API 添加自定义标注 多点标注

分四个文件 location.php map.css 图片 数据库 数据库配置自己改下

------------------------------------------------------------  华丽的分割线   -----------------------------------------------------

location.php 主文件

<link rel="stylesheet" type="text/css" href="map.css">

<?php

$config=mysql_connect("localhost","root","root");

mysql_select_db("baidu_map");

mysql_query("set names utf8");

$query=mysql_query("select * from location");

$sql_num=mysql_num_rows($query);

while($rows=mysql_fetch_array($query))

{

$rows_latitude[]=$rows[‘latitude‘];   //经度

$rows_longitude[]=$rows[‘longitude‘]; //纬度

$rows_store_name[]=$rows[‘store_name‘]; //店铺名称

$rows_info[]=$rows[‘info‘]; //详细信息

}

?>

<style type="text/css">

body{margin:0px;padding:0px}

#container

{

height:480px;

width:750px;

margin-top:15px;

margin-bottom:15px;

border:1px solid #E9E7D4;

}

.BMap_bubble_content { font-size:12px;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

<script>

function visitMap(theArea)

{

switch(theArea)

{

case "01":

map.centerAndZoom(new BMap.Point(119.2689127612,26.0497002276),14)//仓山区

break

case "02":

map.centerAndZoom(new BMap.Point(119.32851499999992,26.082105),14)//晋安区

break

case "03":

map.centerAndZoom(new BMap.Point(119.304217,26.082593),14)//鼓楼区

break

case "04":

map.centerAndZoom(new BMap.Point(119.314123,26.052837),14)//台江区

break

case "05":

map.centerAndZoom(new BMap.Point(119.45558900000005,25.9962505191156),14)//马尾区

break

}

}

</script>

<div class="white_container">

<h2>怎样集飞币</h2>

<div class="clear"></div>

<h4 class="sub_heading">

你可以在联盟商家消费或者参与商家活动获取飞币，

使用下面的地图可以搜索到飞买网的联盟商家。

</h4>

<div id="r-result">

<label class="h4title">请输入查询地址:</label><br /><input type="text" id="suggestId" class="addressSearchInput" /></div>

<div id="searchResultPanel">

</div>

<label class="h4title">请选择查询位置</label>

<br />

<select class="flyaddress" onChange="visitMap(this.value)">

<option value="01">仓山区</option>

<option value="02">晋安区</option>

<option value="03">鼓楼区</option>

<option value="04">台江区</option>

<option value="05">马尾区</option>

</select>

<div id="container"></div>

</div>

<script type="text/javascript">

var map = new BMap.Map("container");          // 创建地图实例

var point = new BMap.Point(119.29649399999994,26.074508);  // 创建点坐标

map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别

map.addControl(new BMap.NavigationControl());   //比例尺

map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用

map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

map.addControl(new BMap.MapTypeControl());      //切换地图类型

map.enableContinuousZoom();    // 开启连续缩放效果

map.enableInertialDragging();　// 开启惯性拖拽效果

var icon = new BMap.Icon(‘fblogo.png‘, new BMap.Size(43, 38), {

anchor: new BMap.Size(43, 38)

});//定义图标

// 编写自定义函数,创建标注

function addMarker(point,info,title){

var marker = new BMap.Marker(point,{icon:icon});

var rows_title=eval(<?php echo json_encode($rows_store_name);?>);

var opts = {

width : 200,     // 信息窗口宽度

height: 50,     // 信息窗口高度

title : title,  // 信息窗口标题

}

var infoWindow = new BMap.InfoWindow(info,opts,{offset:new BMap.Size(-5,-20)});  // 创建信息窗口对象

map.addOverlay(marker);

marker.addEventListener("click", function(){

this.openInfoWindow(infoWindow); map.zoomIn();

});

marker.setLabel(new BMap.Label(title,{offset:new BMap.Size(43,0)}));

}

// 向地图添加标注

var rows_latitude=eval(<?php echo json_encode($rows_latitude);?>);

var rows_longitude=eval(<?php echo json_encode($rows_longitude);?>);

var rows_store_name=eval(<?php echo json_encode($rows_store_name);?>);

var rows_info=eval(<?php echo json_encode($rows_info);?>);

for (var i = 0; i < <?php echo $sql_num;?>; i ++) {

var point = new BMap.Point(rows_latitude[i], rows_longitude[i]);

addMarker(point,rows_info[i],rows_store_name[i]);

}

function G(id) {

return document.getElementById(id);

}

var ac = new BMap.Autocomplete(    //建立一个自动完成的对象

{"input" : "suggestId"

,"location" : map

});

ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件

var str = "";

var _value = e.fromitem.value;

var value = "";

if (e.fromitem.index > -1) {

value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

}

str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

value = "";

if (e.toitem.index > -1) {

_value = e.toitem.value;

value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

}

str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

G("searchResultPanel").innerHTML = str;

});

var myValue;

ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件

var _value = e.item.value;

myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

//    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

G("searchResultPanel").innerHTML =myValue;

setPlace();

});

function setPlace(){

//    map.clearOverlays();    //清除地图上所有覆盖物

function myFun(){

var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

map.centerAndZoom(pp, 15);

//        map.addOverlay(new BMap.Marker(pp));    //添加标注

}

var local = new BMap.LocalSearch(map, { //智能搜索

onSearchComplete: myFun

});

local.search(myValue);

}

</script>

------------------------------------------------------------  华丽的分割线   -----------------------------------------------------

css样式

@charset "utf-8";

/* CSS Document */

.white_container

{

font-size:12px;

width:975px;

padding-left:10px;

}

.white_container h2

{

color: #78326E;

font-family: "Arial Black", Gadget, sans-serif;

font-size:25px;

font-weight: bold;

margin: 0.3em 0;

text-rendering: optimizelegibility

}

.white_container h4

{

margin:0;

line-height:20px;

}

.white_container option { border:none;}

#searchResultPanel { display:none;}

#suggestId

{

background: none repeat scroll 0 0 #F3FCFF;

border-color: #7FD8F5;

border-style: solid;

border-width: 1px;

padding: 4px 10px;

width:400px;

margin-top:2px;

}

#r-result

{

margin-bottom:15px;

margin-top:10px;

}

.h4title { font-size:13px; margin-bottom:5px;}

.flyaddress

{

background: none repeat scroll 0 0 #F3FCFF;

border-color: #7FD8F5;

border-style: solid;

border-width: 1px;

padding: 10px;

min-width:250px;

margin-top:2px;

}

.sub_heading{

border-bottom: 1px solid #D5D4D5;

color: #4C6E84;

font-size: 16px;

font-weight: bold;

line-height: 1.7;

margin-bottom: 20px;

padding-bottom: 6px;

width:750px;

}

------------------------------------------------------------  华丽的分割线   -----------------------------------------------------

数据库文件

CREATE TABLE `location` (

`id` int(10) NOT NULL auto_increment,

`latitude` varchar(30) NOT NULL,

`longitude` varchar(30) NOT NULL,

`address` varchar(255) character set gbk NOT NULL,

PRIMARY KEY  (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

INSERT INTO `location` VALUES (‘1‘, ‘119.298974‘, ‘26.06724929‘, ‘宝龙城市广场A幢‘);

INSERT INTO `location` VALUES (‘2‘, ‘119.307171‘, ‘26.070835‘, ‘博美诗邦‘);

INSERT INTO `location` VALUES (‘3‘, ‘119.317156\r\n‘, ‘26.058129‘, ‘中亭街唯唯‘);

------------------------------------------------------------  华丽的分割线   -----------------------------------------------------

图片

时间： 2024-10-06 17:59:36

百度地图API 添加自定义标注 多点标注的相关文章

百度地图API显示多个标注点带提示的代码

效果如图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>百度地图API显示多个

百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提示信息也当然要不一样嘛,因为给标注绑定的鼠标事件当你移动鼠标上去的其实循环值已经是最后值了,所以无论你怎么做,所有的标注点都是同一个提示,就是最后的那个提示.我就打开百度找方案嘛.一找之下,搜了几十页就一个解决方案,大家都是你拷贝我的我拷贝你的.做个闭包.把循环的值锁定在里面.代码照着做,也的确可以

百度地图API的第一次接触——标注和信息窗的使用

1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0

百度地图API一：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

百度地图中根据页面中的point,自动设置缩放级别和视图中心,将所有的point在视图范围内展示. var points = [point1, point2,point3]; var view = map.getViewport(eval(points)); var mapZoom = view.zoom; var centerPoint = view.center; map.centerAndZoom(centerPoint,mapZoom);

百度地图API显示多个标注点并添加百度样式检索窗口

<%@ page language="java" pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

百度地图Api进阶教程-创建标注和自定义标注3.html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1

百度地图api，点击标注，改变标注marker图标的链接地址

改变选中的图标样式 1 // 选中高亮标注图片 2 let mapIcon = ‘./icon.png’; 3 4 //标注点 5 let markerArrs = [{},{},....]; 6 7 8 // 点击标注点 9 marker.addEventListener("click", (evt) => { 10 for (let j = 0; j < markerArrs.length; j++) { 11 const element = markerArrs[j]

【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------------------------------------------------------------------------- 我们不用花大把时间写代码去跑数据,只需要利用百度地图API提供的免费接口,就可以

百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip