百度地圖API新增自定義標註多點標註

傑克.陳發表於2015-01-08
地圖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
`, `26.058129`, `中亭街唯唯`);
————————————————————  華麗的分割線   —————————————————–
圖片
百度地圖API 新增自定義標註 多點標註 - 過客 - 牧野流星

 


相關文章