参考腾讯地图 http://lbs.qq.com/javascript_v2/index.html
1.现在手头的是用angular写的移动端，先说一下angular遇到的坑
1.angular最基础的问题页面闪烁的问题
在用{{}}双大括号绑定数据的时候在数据还没有加载到的时候回不全部展示出来，用户体验很不好。所以在这种情况下可以通过ng-bind来进行数据绑定
2.众所周知angular是mvvm模式，双向数据绑定。体现在双向数据绑定最好的就是表单了。
所谓双向数据绑定就是视图改变数据，数据改变视图。
<input type='text' ng-model='num'>
<span>{{num}}</span>
3.在angular中用到了jq中的毁掉函数的话，在第一次加载的时候数据不会展示在页面上。
所以可以通过jq的$apply来进行关联
4.后台返回数据的时候如果某一个值是比较长的数字，在转成json格式的时候就会进行编译。把数字转换了。
可以先获取text类型的数据然后把那个数据改变成字符串类型的就不会进行编译。然后再转换成json的数据格式进行绑定。
2.项目需求给集团门店打点
腾讯地图实例链接 http://lbs.qq.com/javascript_v2/demo.html
可以满足地图的需求。
1.创建地图
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
window.onload = function(){
//直接加载地图
//初始化地图函数 自定义函数名init
function init() {
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.916527,116.397128), // 地图的中心地理坐标。
zoom:8 // 地图的中心地理坐标。
});
}
//调用初始化函数地图
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);
//添加监听事件 当标记被点击了 设置图层
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();
//经纬度信息
map.panTo(new qq.maps.LatLng(getLat, getLng));
var latLng = new qq.maps.LatLng(getLat, getLng);
//调用获取位置方法
geocoder.getAddress(latLng);
}, 1000);
4.移除地图标记
<script>
//定义地图，标记数组
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监听事件
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() + ']');
//经度
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>
