在小程式中顯示地圖並新增標註的教程
阿新 • • 發佈:2019-01-26
前言
需求:
- 在小程式裡顯示地圖,並標記地圖上的一個座標點。
- 管理員可以在後臺設定座標點
小程式顯示地圖和座標點
.wxml檔案
<view style="display:flex; justify-content:center;" > <map id="myMap" style="width: 90%; height: 600rpx;" longitude="{{longitude}}" latitude="{{latitude}}" scale="15" markers="{{markers}}" ></map> </view>
解釋:
- longitude : 經度
- latitude : 緯度
- scale : 縮放級別,取值範圍為5-18
- markers : 標記點
.js 檔案
data: {
longitude: 116.404008,
latitude: 39.914209,
markers:[]
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
this.mapCtx = wx.createMapContext('myMap')
},
從後臺介面獲取到座標資料後,要把資料渲染到地圖上。
介面主要有兩個資料,一個是經度longitude,一個是維度latitude
var marker = {
id: 1,
latitude: data.latitude,
longitude: data.longitude
}
var markers = new Array();
markers.push(marker);
this.setData({
markers: markers,
latitude: data.latitude,
longitude: data.longitude
});
這樣就能得到開頭的那種顯示效果了。
後臺設定座標點
使用百度地圖在地圖上進行選點,效果如下:
下面是html的demo程式碼
<!DOCTYPE HTML> <html> <head> <title> demo </title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=申請的祕鑰AK"></script> <style> #allmap { height: 200px; } </style> </head> <body> <div id="" class=""> <div id="r-result">輸入地址進行搜尋:<input type="text" id="suggestId" size="20" value="" style="width:80%;"/></div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> <div id="allmap"></div> <p> 經度:</span><input type="text" id="lng" readonly/></p> <p> 緯度:</span><input type="text" id="lat" readonly/></p> </div> <script type="text/javascript"> function G(id) { return document.getElementById(id); } // 百度地圖API功能 var map = new BMap.Map("allmap"); var a = 116.403478; var b = 39.923457; var point = new BMap.Point(a, b); map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }); // 左上角,新增比例尺 var top_left_navigation = new BMap.NavigationControl(); //左上角,新增預設縮放平移控制元件 map.addControl(top_left_control); map.addControl(top_left_navigation); var geoc = new BMap.Geocoder(); map.addEventListener("click", function(e) { var pt = e.point; // console.log(pt) // console.log(pt.lng) // console.log(pt.lat) G("lng").value = pt.lng; G("lat").value = pt.lat; map.clearOverlays(); // 清除覆蓋物 var marker = new BMap.Marker(pt); // 建立標註 map.addOverlay(marker); // 將標註新增到地圖中 }); 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; setPlace(); }); function setPlace() { map.clearOverlays(); //清除地圖上所有覆蓋物 function myFun() { var pp = local.getResults().getPoi(0).point; //獲取第一個智慧搜尋的結果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp)); //新增標註 } var local = new BMap.LocalSearch(map, { //智慧搜尋 onSearchComplete: myFun }); local.search(myValue); } </script> </body> </html>
注:
-
引入百度地圖api,主要注意修改為自己的ak
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=申請的祕鑰AK"></script>
-
為地圖新增點選事件,並建立標註
map.addEventListener("click", function(e) {
var pt = e.point;
map.clearOverlays(); // 清除覆蓋物
var marker = new BMap.Marker(pt); // 建立標註
map.addOverlay(marker); // 將標註新增到地圖中
});
新增搜尋的功能
可以模糊搜尋地名快速定位到想要的地點,效果如下:
主要使用了百度地圖的api,主要是建立一個自動完成的物件,具體程式碼可以參照上面的demo
var ac = new BMap.Autocomplete(
{
"input": "suggestId",
"location": map
});
最後在兩個input元素,lng和lat,就能得到座標點的經度和維度,儲存到資料庫就可以提供給小程式呼叫了。
在使用中發現百度地圖得到的座標資料放到小程式裡就會出現不小的偏差,因為小程式裡使用的是騰訊地圖,(當然也可以選擇高德地圖),偏差大概有500米,這個是無法忍受的,所以決定後臺換成騰訊地圖。
騰訊地圖設定座標點
同樣需要去 騰訊地圖開放平臺 https://lbs.qq.com/ ,申請一個key,作用跟百度地圖的ak一樣。
下面的程式碼是仿照騰訊地圖提供的示例寫的,因為裡面包含了全國市級行政的資料,所以顯得程式碼量很大。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>騰訊地圖</title>
<link rel="stylesheet" href="http://lbs.qq.com/tool/getpoint/common.css">
<script src="http://lbs.qq.com/tool/getpoint/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://lbs.qq.com/tool/getpoint/jquery-ui.min.css">
<script src="http://lbs.qq.com/tool/getpoint/jquery-ui-1.10.4.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#main {
height: 553px;
width: 912px;
border: 1px solid #5688CB;
border-top: 0px;
}
#tooles {
height: 23px;
background: #5688CB;
position: relative;
z-index: 100;
color:white;
}
#bside_left {
width: 260px;
height: 510px;
padding: 10px 0px 10px 10px;
float: left;
overflow: auto;
}
#cur_city, #no_value {
height: 20px;
position: absolute;
top: 3px;
left: 10px;
}
#cur_city .change_city {
margin-left: 5px;
cursor: pointer;
}
#level {
margin-left: 20px;
}
.logo_img {
width: 172px;
height: 23px;
}
.search {
width: 280px;
height: 53px;
padding-left: 10px;
float: left;
margin-left: 15px;
margin-right: 30px;
}
.search_t {
width: 200px;
height: 18px;
padding: 3px;
margin-top: 13px;
line-height: 20px;
}
.search_c {
width: 220px;
height: 40px;
float: left;
}
.btn, .btn_active {
width: 49px;
height: 24px;
line-height: 24px;
font-size: 14px;
float: left;
background: url(http://lbs.qq.com/tool/getpoint/img/btn.png);
margin-top: 14px;
text-align: center;
cursor: pointer;
}
.btn_active {
background: url(http://lbs.qq.com/tool/getpoint/img/btn.png) -49px 0px;
}
.poi {
width: 570px;
height: 41;
padding-top: 12px;
float: left;
position: relative;
}
.poi_note {
width: 63px;
line-height: 26px;
float: left;
}
#poi_cur {
width: 160px;
height: 22px;
margin-right: 10px;
margin-top: 3px;
line-height: 26px;
float: left;
text-align: center;
}
#addr_cur {
width: 260px;
height: 22px;
margin-right: 5px;
margin-top: 3px;
line-height: 26px;
float: left;
text-align: center;
}
.btn_copy {
width: 49px;
height: 24px;
background: url(../img/btn_cpoy.png) 0px 0px;
float: left;
}
.already {
width: 52px;
line-height: 26px;
padding-left: 5px;
float: left;
color: red;
display: none;
}
.info_list {
margin-bottom: 5px;
cleat: both;
cursor: pointer;
}
#txt_pannel {
height: 500px;
}
#city {
width: 356px;
height: 433px;
padding: 10px;
border: 2px solid #D6D6D6;
position: absolute;
left: 44px;
top: 20px;
z-index: 999;
background: #fff;
overflow: auto;
color: black;
}
#city .city_class {
font-size: 12px;
background: #fff;
}
#city .city_container {
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
}
#city .city_container_left {
width: 48px;
float: left;
}
#city .city_container_right {
width: 289px;
float: left;
}
#city .close {
width: 20px;
height: 20px;
display: inline-block;
float: right;
font-size: 20px;
font-weight: normal;
cursor: pointer;
}
#city .city_name {
line-height: 20px;
margin-left: 5px;
color: #2F82C4;
cursor: pointer;
display: inline-block;
font-size: 12px;
}
#curCity {
margin-right: 5px;
}
.hide {
display: none;
}
#bside_rgiht {
width: 631px;
height: 530px;
margin-left: 10px;
border-left: 1px solid #5688CB;
float: left;
font-size: 12px;
}
#container {
width: 621px;
height: 520px;
border: 5px solid #fff;
}
#no_value{
color:red;
position: relative;
width:200px;
}
</style>
</head>
<body>
<div style="position:relative;">
<div style="height:53px;">
<div class="search">
<div class="search_c"><input type="text" class="search_t" onKeyPress="if(event.keyCode==13) {btnSearch.click();return false;}"/></div>
<div id="btn_search" class="btn">搜尋</div>
</div>
<div class="poi">
<div class="poi_note">當前座標:</div>
<input type="text" id="poi_cur" />
<div class="poi_note">當前地址:</div>
<input type="text" id="addr_cur" />
</div>
</div>
<div id="main">
<div id="tooles">
<div id="cur_city">
<strong>石家莊</strong><span class="change_city">[<span style="text-decoration:underline;">更換城市</span>]<span id="level">當前縮放等級:10</span></span>
<div id="city" class="hide">
<h3 class="city_class">熱門城市<span class="close">X</span></h3>
<div class="city_container">
<span class="city_name">北京</span>
<span class="city_name">深圳</span>
<span class="city_name">上海</span>
<span class="city_name">香港</span>
<span class="city_name">澳門</span>
<span class="city_name">廣州</span>
<span class="city_name">天津</span>
<span class="city_name">重慶</span>
<span class="city_name">杭州</span>
<span class="city_name">成都</span>
<span class="city_name">武漢</span>
<span class="city_name">青島</span>
</div>
<h3 class="city_class">全國城市</h3>
<div class="city_container">
<div class="city_container_left">直轄市</div>
<div class="city_container_right">
<span class="city_name">北京</span>
<span class="city_name">上海</span>
<span class="city_name">天津</span>
<span class="city_name">重慶</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">內蒙古</span></div>
<div class="city_container_right">
<span class="city_name">呼和浩特</span>
<span class="city_name">包頭</span>
<span class="city_name">烏海</span>
<span class="city_name">赤峰</span>
<span class="city_name">通遼</span>
<span class="city_name">鄂爾多斯</span>
<span class="city_name">呼倫貝爾</span>
<span class="city_name">巴彥淖爾</span>
<span class="city_name">烏蘭察布</span>
<span class="city_name">興安盟</span>
<span class="city_name">錫林郭勒盟</span>
<span class="city_name">阿拉善盟</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">山西</span></div>
<div class="city_container_right">
<span class="city_name">太原</span>
<span class="city_name">大同</span>
<span class="city_name">陽泉</span>
<span class="city_name">長治</span>
<span class="city_name">晉城</span>
<span class="city_name">朔州</span>
<span class="city_name">晉中</span>
<span class="city_name">運城</span>
<span class="city_name">忻州</span>
<span class="city_name">臨汾</span>
<span class="city_name">呂梁</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">陝西</span></div>
<div class="city_container_right">
<span class="city_name">西安</span>
<span class="city_name">銅川</span>
<span class="city_name">寶雞</span>
<span class="city_name">咸陽</span>
<span class="city_name">渭南</span>
<span class="city_name">延安</span>
<span class="city_name">漢中</span>
<span class="city_name">榆林</span>
<span class="city_name">安康</span>
<span class="city_name">商洛</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">河北</span></div>
<div class="city_container_right">
<span class="city_name">石家莊</span>
<span class="city_name">唐山</span>
<span class="city_name">秦皇島</span>
<span class="city_name">邯鄲</span>
<span class="city_name">邢臺</span>
<span class="city_name">保定</span>
<span class="city_name">張家口</span>
<span class="city_name">承德</span>
<span class="city_name">滄州</span>
<span class="city_name">廊坊</span>
<span class="city_name">衡水</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">遼寧</span></div>
<div class="city_container_right">
<span class="city_name">瀋陽</span>
<span class="city_name">大連</span>
<span class="city_name">鞍山</span>
<span class="city_name">撫順</span>
<span class="city_name">本溪</span>
<span class="city_name">丹東</span>
<span class="city_name">錦州</span>
<span class="city_name">營口</span>
<span class="city_name">阜新</span>
<span class="city_name">遼陽</span>
<span class="city_name">盤錦</span>
<span class="city_name">鐵嶺</span>
<span class="city_name">朝陽</span>
<span class="city_name">葫蘆島</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">吉林</span></div>
<div class="city_container_right">
<span class="city_name">長春</span>
<span class="city_name">吉林</span>
<span class="city_name">四平</span>
<span class="city_name">遼源</span>
<span class="city_name">通化</span>
<span class="city_name">白山</span>
<span class="city_name">松原</span>
<span class="city_name">白城</span>
<span class="city_name">延邊</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">黑龍江</span></div>
<div class="city_container_right">
<span class="city_name">哈爾濱</span>
<span class="city_name">齊齊哈爾</span>
<span class="city_name">雞西</span>
<span class="city_name">鶴崗</span>
<span class="city_name">雙鴨山</span>
<span class="city_name">大慶</span>
<span class="city_name">伊春</span>
<span class="city_name">牡丹江</span>
<span class="city_name">佳木斯</span>
<span class="city_name">七臺河</span>
<span class="city_name">黑河</span>
<span class="city_name">綏化</span>
<span class="city_name">大興安嶺</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">江蘇</span></div>
<div class="city_container_right">
<span class="city_name">南京</span>
<span class="city_name">無錫</span>
<span class="city_name">徐州</span>
<span class="city_name">常州</span>
<span class="city_name">蘇州</span>
<span class="city_name">南通</span>
<span class="city_name">連雲港</span>
<span class="city_name">淮安</span>
<span class="city_name">鹽城</span>
<span class="city_name">揚州</span>
<span class="city_name">鎮江</span>
<span class="city_name">泰州</span>
<span class="city_name">宿遷</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">安徽</span></div>
<div class="city_container_right">
<span class="city_name">合肥</span>
<span class="city_name">蚌埠</span>
<span class="city_name">蕪湖</span>
<span class="city_name">淮南</span>
<span class="city_name">馬鞍山</span>
<span class="city_name">淮北</span>
<span class="city_name">銅陵</span>
<span class="city_name">安慶</span>
<span class="city_name">黃山</span>
<span class="city_name">阜陽</span>
<span class="city_name">宿州</span>
<span class="city_name">滁州</span>
<span class="city_name">六安</span>
<span class="city_name">宣城</span>
<span class="city_name">池州</span>
<span class="city_name">亳州</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">山東</span></div>
<div class="city_container_right">
<span class="city_name">濟南</span>
<span class="city_name">青島</span>
<span class="city_name">淄博</span>
<span class="city_name">棗莊</span>
<span class="city_name">東營</span>
<span class="city_name">濰坊</span>
<span class="city_name">煙臺</span>
<span class="city_name">威海</span>
<span class="city_name">濟寧</span>
<span class="city_name">泰安</span>
<span class="city_name">日照</span>
<span class="city_name">萊蕪</span>
<span class="city_name">臨沂</span>
<span class="city_name">德州</span>
<span class="city_name">聊城</span>
<span class="city_name">濱州</span>
<span class="city_name">菏澤</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">浙江</span></div>
<div class="city_container_right">
<span class="city_name">杭州</span>
<span class="city_name">寧波</span>
<span class="city_name">溫州</span>
<span class="city_name">嘉興</span>
<span class="city_name">紹興</span>
<span class="city_name">金華</span>
<span class="city_name">衢州</span>
<span class="city_name">舟山</span>
<span class="city_name">台州</span>
<span class="city_name">麗水</span>
<span class="city_name">湖州</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">江西</span></div>
<div class="city_container_right">
<span class="city_name">南昌</span>
<span class="city_name">景德鎮</span>
<span class="city_name">萍鄉</span>
<span class="city_name">九江</span>
<span class="city_name">新餘</span>
<span class="city_name">鷹潭</span>
<span class="city_name">贛州</span>
<span class="city_name">吉安</span>
<span class="city_name">宜春</span>
<span class="city_name">撫州</span>
<span class="city_name">上饒</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">福建</span></div>
<div class="city_container_right">
<span class="city_name">福州</span>
<span class="city_name">廈門</span>
<span class="city_name">莆田</span>
<span class="city_name">三明</span>
<span class="city_name">泉州</span>
<span class="city_name">漳州</span>
<span class="city_name">南平</span>
<span class="city_name">龍巖</span>
<span class="city_name">寧德</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">湖南</span></div>
<div class="city_container_right">
<span class="city_name">長沙</span>
<span class="city_name">株洲</span>
<span class="city_name">湘潭</span>
<span class="city_name">衡陽</span>
<span class="city_name">邵陽</span>
<span class="city_name">岳陽</span>
<span class="city_name">常德</span>
<span class="city_name">張家界</span>
<span class="city_name">益陽</span>
<span class="city_name">郴州</span>
<span class="city_name">永州</span>
<span class="city_name">懷化</span>
<span class="city_name">婁底</span>
<span class="city_name">湘西</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">湖北</span></div>
<div class="city_container_right">
<span class="city_name">武漢</span>
<span class="city_name">黃石</span>
<span class="city_name">襄樊</span>
<span class="city_name">十堰</span>
<span class="city_name">宜昌</span>
<span class="city_name">荊門</span>
<span class="city_name">鄂州</span>
<span class="city_name">孝感</span>
<span class="city_name">荊州</span>
<span class="city_name">黃岡</span>
<span class="city_name">咸寧</span>
<span class="city_name">隨州</span>
<span class="city_name">恩施</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">河南</span></div>
<div class="city_container_right">
<span class="city_name">鄭州</span>
<span class="city_name">開封</span>
<span class="city_name">洛陽</span>
<span class="city_name">平頂山</span>
<span class="city_name">焦作</span>
<span class="city_name">鶴壁</span>
<span class="city_name">新鄉</span>
<span class="city_name">安陽</span>
<span class="city_name">濮陽</span>
<span class="city_name">許昌</span>
<span class="city_name">漯河</span>
<span class="city_name">三門峽</span>
<span class="city_name">南陽</span>
<span class="city_name">商丘</span>
<span class="city_name">信陽</span>
<span class="city_name">周口</span>
<span class="city_name">駐馬店</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">海南</span></div>
<div class="city_container_right">
<span class="city_name">海口</span>
<span class="city_name">三亞</span>
<span class="city_name">三沙</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">廣東</span></div>
<div class="city_container_right">
<span class="city_name">廣州</span>
<span class="city_name">深圳</span>
<span class="city_name">珠海</span>
<span class="city_name">汕頭</span>
<span class="city_name">韶關</span>
<span class="city_name">佛山</span>
<span class="city_name">江門</span>
<span class="city_name">湛江</span>
<span class="city_name">茂名</span>
<span class="city_name">東沙群島</span>
<span class="city_name">肇慶</span>
<span class="city_name">惠州</span>
<span class="city_name">梅州</span>
<span class="city_name">汕尾</span>
<span class="city_name">河源</span>
<span class="city_name">陽江</span>
<span class="city_name">清遠</span>
<span class="city_name">東莞</span>
<span class="city_name">中山</span>
<span class="city_name">潮州</span>
<span class="city_name">揭陽</span>
<span class="city_name">雲浮</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">廣西</span></div>
<div class="city_container_right">
<span class="city_name">南寧</span>
<span class="city_name">柳州</span>
<span class="city_name">桂林</span>
<span class="city_name">梧州</span>
<span class="city_name">北海</span>
<span class="city_name">防城港</span>
<span class="city_name">欽州</span>
<span class="city_name">貴港</span>
<span class="city_name">玉林</span>
<span class="city_name">百色</span>
<span class="city_name">賀州</span>
<span class="city_name">河池</span>
<span class="city_name">來賓</span>
<span class="city_name">崇左</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">貴州</span></div>
<div class="city_container_right">
<span class="city_name">貴陽</span>
<span class="city_name">遵義</span>
<span class="city_name">安順</span>
<span class="city_name">銅仁</span>
<span class="city_name">畢節</span>
<span class="city_name">六盤水</span>
<span class="city_name">黔西南</span>
<span class="city_name">黔東南</span>
<span class="city_name">黔南</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">四川</span></div>
<div class="city_container_right">
<span class="city_name">成都</span>
<span class="city_name">自貢</span>
<span class="city_name">攀枝花</span>
<span class="city_name">瀘州</span>
<span class="city_name">德陽</span>
<span class="city_name">綿陽</span>
<span class="city_name">廣元</span>
<span class="city_name">遂寧</span>
<span class="city_name">內江</span>
<span class="city_name">樂山</span>
<span class="city_name">南充</span>
<span class="city_name">宜賓</span>
<span class="city_name">廣安</span>
<span class="city_name">達州</span>
<span class="city_name">眉山</span>
<span class="city_name">雅安</span>
<span class="city_name">巴中</span>
<span class="city_name">資陽</span>
<span class="city_name">阿壩</span>
<span class="city_name">甘孜</span>
<span class="city_name">涼山</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">雲南</span></div>
<div class="city_container_right">
<span class="city_name">昆明</span>
<span class="city_name">保山</span>
<span class="city_name">昭通</span>
<span class="city_name">麗江</span>
<span class="city_name">普洱</span>
<span class="city_name">臨滄</span>
<span class="city_name">曲靖</span>
<span class="city_name">玉溪</span>
<span class="city_name">文山</span>
<span class="city_name">西雙版納</span>
<span class="city_name">楚雄</span>
<span class="city_name">紅河</span>
<span class="city_name">德巨集</span>
<span class="city_name">大理</span>
<span class="city_name">怒江</span>
<span class="city_name">迪慶</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">甘肅</span></div>
<div class="city_container_right">
<span class="city_name">蘭州</span>
<span class="city_name">嘉峪關</span>
<span class="city_name">金昌</span>
<span class="city_name">白銀</span>
<span class="city_name">天水</span>
<span class="city_name">酒泉</span>
<span class="city_name">張掖</span>
<span class="city_name">武威</span>
<span class="city_name">定西</span>
<span class="city_name">隴南</span>
<span class="city_name">平涼</span>
<span class="city_name">慶陽</span>
<span class="city_name">臨夏</span>
<span class="city_name">甘南</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">寧夏</span></div>
<div class="city_container_right">
<span class="city_name">銀川</span>
<span class="city_name">石嘴山</span>
<span class="city_name">吳忠</span>
<span class="city_name">固原</span>
<span class="city_name">中衛</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">青海</span></div>
<div class="city_container_right">
<span class="city_name">西寧</span>
<span class="city_name">玉樹</span>
<span class="city_name">果洛</span>
<span class="city_name">海東</span>
<span class="city_name">海西</span>
<span class="city_name">黃南</span>
<span class="city_name">海北</span>
<span class="city_name">海南</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">西藏</span></div>
<div class="city_container_right">
<span class="city_name">拉薩</span>
<span class="city_name">那曲</span>
<span class="city_name">昌都</span>
<span class="city_name">山南</span>
<span class="city_name">日喀則</span>
<span class="city_name">阿里</span>
<span class="city_name">林芝</span>
</div>
</div>
<div style="clear:both"></div>
<div class="city_container">
<div class="city_container_left"><span class="style_color">新疆</span></div>
<div class="city_container_right">
<span class="city_name">烏魯木齊</span>
<span class="city_name">克拉瑪依</span>
<span class="city_name">吐魯番</span>
<span class="city_name">哈密</span>
<span class="city_name">博爾塔拉</span>
<span class="city_name">巴音郭楞</span>
<span class="city_name">克孜勒蘇</span>
<span class="city_name">和田</span>
<span class="city_name">阿克蘇</span>
<span class="city_name">喀什</span>
<span class="city_name">塔城</span>
<span class="city_name">伊犁</span>
<span class="city_name">昌吉</span>
<span class="city_name">阿勒泰</span>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<div id="bside_left">
<div id="txt_pannel">
<h3>功能簡介:</h3>
<p>1、支援地址 精確/模糊 查詢;</p>
<p>2、支援POI點座標顯示;</p>
<p>3、座標滑鼠跟隨顯示;</p>
<h3>使用說明:</h3>
<p>在搜尋框搜尋關鍵詞後,地圖上會顯示相應poi點,同時左側顯示對應該點的資訊,點選某點或某資訊,右上角會顯示相應該點的座標和地址。</p>
</div>
</div>
<div id="bside_rgiht">
<div id="container"></div>
</div>
</div>
</div>
<script type="text/javascript">
var key = '騰訊開放平臺申請的key';
var container = document.getElementById("container");
var map = new qq.maps.Map(container, {
zoom: 12
}),
label = new qq.maps.Label({
map: map,
offset: new qq.maps.Size(15,-12),
draggable: false,
clickable: false
}),
markerArray = [],
curCity = document.getElementById("cur_city"),
btnSearch = document.getElementById("btn_search"),
bside = document.getElementById("bside_left"),
url, query_city,
cityservice = new qq.maps.CityService({
complete: function (result) {
console.log(result)
curCity.children[0].innerHTML = result.detail.name;
map.setCenter(result.detail.latLng);
}
});
//設定經緯度資訊
var latLng = new qq.maps.LatLng(39.923457, 116.403478);
//呼叫城市經緯度查詢介面實現經緯查詢
cityservice.searchCityByLatLng(latLng);
map.setOptions({
draggableCursor: "crosshair"
});
$(container).mouseenter(function () {
label.setMap(map);
});
$(container).mouseleave(function () {
label.setMap(null);
});
qq.maps.event.addListener(map, "mousemove", function (e) {
var latlng = e.latLng;
label.setPosition(latlng);
label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
});
var url3;
qq.maps.event.addListener(map, "click", function (e) {
document.getElementById("poi_cur").value = e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);
url3 = encodeURI("http://apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key="+key+"&output=jsonp&&callback=?");
$.getJSON(url3, function (result) {
if(result.result!=undefined){
document.getElementById("addr_cur").value = result.result.address;
}else{
document.getElementById("addr_cur").value = "";
}
})
console.log(e)
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
var center = new qq.maps.LatLng(e.latLng.getLat().toFixed(6),e.latLng.getLng().toFixed(6));
//建立marker
var marker = new qq.maps.Marker({
position: e.latLng,
map: map
});
markerArray.push(marker);
});
qq.maps.event.addListener(map, "zoom_changed", function () {
document.getElementById("level").innerHTML = "當前縮放等級:" + map.getZoom();
});
var listener_arr = [];
var isNoValue = false;
qq.maps.event.addDomListener(btnSearch, 'click', function () {
var value = this.parentNode.getElementsByTagName("input")[0].value;
var latlngBounds = new qq.maps.LatLngBounds();
for(var i= 0,l=listener_arr.length;i<l;i++){
qq.maps.event.removeListener(listener_arr[i]);
}
listener_arr.length = 0;
query_city = curCity.children[0].innerHTML;
url = encodeURI("http://apis.map.qq.com/ws/place/v1/search?keyword=" + value + "&boundary=region(" + query_city + ",0)&page_size=9&page_index=1&key="+key+"&output=jsonp&&callback=?");
$.getJSON(url, function (result) {
if (result.count) {
isNoValue = false;
bside.innerHTML = "";
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
each(result.data, function (n, ele) {
var latlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng);
latlngBounds.extend(latlng);
var left = n * 27;
var marker = new qq.maps.Marker({
map: map,
position: latlng,
zIndex: 10
});
marker.index = n;
marker.isClicked = false;
setAnchor(marker, true);
markerArray.push(marker);
var listener1 = qq.maps.event.addDomListener(marker, "mouseover", function () {
var n = this.index;
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
label.setContent(this.position.getLat().toFixed(6) + "," + this.position.getLng().toFixed(6));
label.setPosition(this.position);
label.setOptions({
offset: new qq.maps.Size(15, -20)
})
});
listener_arr.push(listener1);
var listener2 = qq.maps.event.addDomListener(marker, "mouseout", function () {
var n = this.index;
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
label.setOptions({
offset: new qq.maps.Size(15, -12)
})
});
listener_arr.push(listener2);
var listener3 = qq.maps.event.addDomListener(marker, "click", function () {
var n = this.index;
setFlagClicked(markerArray, n);
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
document.getElementById("addr_cur").value = bside.childNodes[n].childNodes[1].childNodes[1].innerHTML.substring(3);
});
listener_arr.push(listener3);
map.fitBounds(latlngBounds);
var div = document.createElement("div");
div.className = "info_list";
var order = document.createElement("div");
var leftn = -54 - 17 * n;
order.style.cssText = "width:17px;height:17px;margin:3px 3px 0px 0px;float:left;background:url(./img/marker_n.png) " + leftn + "px 0px";
div.appendChild(order);
var pannel = document.createElement("div");
pannel.style.cssText = "width:200px;float:left;";
div.appendChild(pannel);
var name = document.createElement("p");
name.style.cssText = "margin:0px;color:#0000CC";
name.innerHTML = ele.title;
pannel.appendChild(name);
var address = document.createElement("p");
address.style.cssText = "margin:0px;";
address.innerHTML = "地址:" + ele.address;
pannel.appendChild(address);
if (ele.tel != undefined) {
var phone = document.createElement("p");
phone.style.cssText = "margin:0px;";
phone.innerHTML = "電話:" + ele.tel;
pannel.appendChild(phone);
}
var position = document.createElement("p");
position.style.cssText = "margin:0px;";
position.innerHTML = "座標:" + ele.location.lat.toFixed(6) + "," + ele.location.lng.toFixed(6);
pannel.appendChild(position);
bside.appendChild(div);
console.log("pannel.offsetHeight",pannel.offsetHeight)
div.style.height = pannel.offsetHeight + "px";
div.isClicked = false;
div.index = n;
marker.div = div;
div.marker = marker;
});
$("#bside_left").delegate(".info_list", "mouseover", function (e) {
var n = this.index;
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
});
$("#bside_left").delegate(".info_list", "mouseout", function () {
each(markerArray, function (n, ele) {
if (!ele.isClicked) {
setAnchor(ele, true);
ele.div.style.background = "#fff";
}
})
});
$("#bside_left").delegate(".info_list", "click", function (e) {
var n = this.index;
setFlagClicked(markerArray, n);
setCurrent(markerArray, n, false);
setCurrent(markerArray, n, true);
map.setCenter(markerArray[n].position);
document.getElementById("addr_cur").value = this.childNodes[1].childNodes[1].innerHTML.substring(3);
});
} else {
bside.innerHTML = "";
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
var novalue = document.createElement('div');
novalue.id = "no_value";
novalue.innerHTML = "對不起,沒有搜尋到您要找的結果!";
bside.appendChild(novalue);
isNoValue = true;
}
});
});
btnSearch.onmousedown = function () {
this.className = "btn_active";
};
btnSearch.onmouseup = function () {
this.className = "btn";
};
function setAnchor(marker, flag) {
var left = marker.index * 27;
if (flag == true) {
var anchor = new qq.maps.Point(10, 30),
origin = new qq.maps.Point(left, 0),
size = new qq.maps.Size(27, 33),
icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
marker.setIcon(icon);
} else {
var anchor = new qq.maps.Point(10, 30),
origin = new qq.maps.Point(left, 35),
size = new qq.maps.Size(27, 33),
icon = new qq.maps.MarkerImage("./img/marker10.png", size, origin, anchor);
marker.setIcon(icon);
}
}
function setCurrent(arr, index, isMarker) {
if (isMarker) {
each(markerArray, function (n, ele) {
if (n == index) {
setAnchor(ele, false);
ele.setZIndex(10);
} else {
if (!ele.isClicked) {
setAnchor(ele, true);
ele.setZIndex(9);
}
}
});
} else {
each(markerArray, function (n, ele) {
if (n == index) {
ele.div.style.background = "#DBE4F2";
} else {
if (!ele.div.isClicked) {
ele.div.style.background = "#fff";
}
}
});
}
}
function setFlagClicked(arr, index) {
each(markerArray, function (n, ele) {
if (n == index) {
ele.isClicked = true;
ele.div.isClicked = true;
var str = '<div style="width:250px;">' + ele.div.children[1].innerHTML.toString() + '</div>';
var latLng = ele.getPosition();
document.getElementById("poi_cur").value = latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);
} else {
ele.isClicked = false;
ele.div.isClicked = false;
}
});
}
var city = document.getElementById("city");
curCity.onclick = function (e) {
var e = e || window.event,
target = e.target || e.srcElement;
if (target.innerHTML == "更換城市") {
city.style.display = "block";
if(isNoValue){
bside.innerHTML = "";
each(markerArray, function (n, ele) {
ele.setMap(null);
});
markerArray.length = 0;
}
}
};
var url2;
city.onclick = function (e) {
var e = e || window.event,
target = e.target || e.srcElement;
if (target.className == "close") {
city.style.display = "none";
}
if (target.className == "city_name") {
curCity.children[0].innerHTML = target.innerHTML;
url2 = encodeURI("http://apis.map.qq.com/ws/geocoder/v1/?region=" + curCity.children[0].innerHTML + "&address=" + curCity.children[0].innerHTML + "&key="+key+"&output=jsonp&&callback=?");
$.getJSON(url2, function (result) {
map.setCenter(new qq.maps.LatLng(result.result.location.lat, result.result.location.lng));
map.setZoom(10);
});
city.style.display = "none";
}
};
var url4;
$(".search_t").autocomplete({
source:function(request,response){
url4 = encodeURI("http://apis.map.qq.com/ws/place/v1/suggestion/?keyword=" + request.term + "®ion=" + curCity.children[0].innerHTML + "&key="+key+"&output=jsonp&&c