參考騰訊地圖 http://lbs.qq.com/javascript_v2/index.html
1.現(xiàn)在手頭的是用angular寫的移動端利虫，先說一下angular遇到的坑
1.angular最基礎的問題頁面閃爍的問題
在用{{}}雙大括號綁定數(shù)據(jù)的時候在數(shù)據(jù)還沒有加載到的時候回不全部展示出來面睛，用戶體驗很不好。所以在這種情況下可以通過ng-bind來進行數(shù)據(jù)綁定
2.眾所周知angular是mvvm模式南窗，雙向數(shù)據(jù)綁定。體現(xiàn)在雙向數(shù)據(jù)綁定最好的就是表單了焰宣。
所謂雙向數(shù)據(jù)綁定就是視圖改變數(shù)據(jù)榆芦，數(shù)據(jù)改變視圖沃粗。
<input type='text' ng-model='num'>
<span>{{num}}</span>
3.在angular中用到了jq中的毀掉函數(shù)的話粥惧，在第一次加載的時候數(shù)據(jù)不會展示在頁面上。
所以可以通過jq的$apply來進行關聯(lián)
4.后臺返回數(shù)據(jù)的時候如果某一個值是比較長的數(shù)字最盅，在轉成json格式的時候就會進行編譯突雪。把數(shù)字轉換了。
可以先獲取text類型的數(shù)據(jù)然后把那個數(shù)據(jù)改變成字符串類型的就不會進行編譯涡贱。然后再轉換成json的數(shù)據(jù)格式進行綁定挂签。
2.項目需求給集團門店打點
騰訊地圖實例鏈接 http://lbs.qq.com/javascript_v2/demo.html
可以滿足地圖的需求。
1.創(chuàng)建地圖
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
window.onload = function(){
//直接加載地圖
//初始化地圖函數(shù) 自定義函數(shù)名init
function init() {
//定義map變量 調用 qq.maps.Map() 構造函數(shù) 獲取地圖顯示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.916527,116.397128), // 地圖的中心地理坐標盼产。
zoom:8 // 地圖的中心地理坐標饵婆。
});
}
//調用初始化函數(shù)地圖
init();
}
</script>
<!-- 定義地圖顯示容器 -->
<div id="container"></div>
2.改變地圖中心和設置marker動畫
function（）{
var info = new qq.maps.InfoWindow({map: map});
geocoder = new qq.maps.Geocoder({
complete : function(result){
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map:map,
position: result.detail.location,
animation:qq.maps.MarkerAnimation.DROP
});
markersArray.push(marker);
//添加監(jiān)聽事件 當標記被點擊了 設置圖層
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="width:150px;height:50px;">'+
result.detail.address+'</div>');
info.setPosition(result.detail.location);
});
}
});
}
3. 調用地圖的位置
setTimeout(function() {
address();
//經(jīng)緯度信息
map.panTo(new qq.maps.LatLng(getLat, getLng));
var latLng = new qq.maps.LatLng(getLat, getLng);
//調用獲取位置方法
geocoder.getAddress(latLng);
}, 1000);
4.移除地圖標記
<script>
//定義地圖，標記數(shù)組
var map,markersArray = [];
var init = function() {
//設置地圖中心點
var center = new qq.maps.LatLng(39.916527,116.397128);
map = new qq.maps.Map(document.getElementById('container'),{
center: center,
zoom: 13
});
//添加dom監(jiān)聽事件
qq.maps.event.addDomListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
//添加標記
function addMarker(location) {
var marker = new qq.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
//清除覆蓋層
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
//顯示覆蓋層
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
//刪除覆蓋物
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
5.地圖的點擊事件以及獲取當前地理位置
qq.maps.event.addListener(map,'click',function(event) {
console.log('您點擊的位置為:[' + event.latLng.getLng()+',' + event.latLng.getLat() + ']');
//經(jīng)度
var getLng=event.latLng.getLng();
//緯度
var getLat=event.latLng.getLat();
$('#coordinate').val(getLat+','+getLng);
var mdAddress=citySear();
$('#addressA').val(mdAddress);
//刪除標記
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
6.地址解析
<script>
var geocoder,map,marker = null;
var init = function() {
var center = new qq.maps.LatLng(39.916527,116.397128);
map = new qq.maps.Map(document.getElementById('container'),{
center: center,
zoom: 15
});
//調用地址解析類
geocoder = new qq.maps.Geocoder({
complete : function(result){
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map:map,
position: result.detail.location
});
}
});
}
function codeAddress() {
var address = document.getElementById("address").value;
//通過getLocation();方法獲取位置信息值
geocoder.getLocation(address);
}
</script>
