腾讯地图的使用，添加多个标记和点击事件

腾讯地图API官网：http://lbs.qq.com/javascript_v2/index.html

获取当前位置经纬度

使用腾讯地图之前，先要获取指定位置的经纬度。获取经纬度方式：

一、可以利用具体地理位置（如：北京市朝阳区朝阳北路101号 朝阳大悦城）来获取经纬度，获取方法如下：

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>$(function(){    var geocoder = new qq.maps.Geocoder();    geocoder.getLocation("北京市朝阳区朝阳北路101号");    geocoder.setComplete(function(result) {        //获取到的经纬度存储在result.detail.location对象中        var latitude = result.detail.location.lat;        var longitude = result.detail.location.lng;    });    geocoder.setError(function() {        //获取经纬度失败（可能是因为输入的地址不对）    });});

二、如果是在微信中使用腾讯地图，可以调用JSSDK来获取当前地理位置的经纬度。方法如下：

    //微信JS-SDK 获取当前位置经纬度    $.ajax({        url: url_bjtest + "wechat/get_signature",        type: "post",        dataType: "json",        data: { "url" : window.location.href },        success: function (data) {            wx.config({                //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。                appId: data.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid                timestamp: data.data.timestamp, // 必填，生成签名的时间戳                nonceStr: data.data.nonceStr, // 必填，生成签名的随机串                signature: data.data.signature,// 必填，签名，见附录1                jsApiList: ['getLocation']  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2            });            wx.ready(function(){                var longitude,latitude;                wx.getLocation({                    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'                    success: function (res) {                        //********注意：这里就获取到了当前位置的经纬度，可以将它传参给需要用到经纬度的方法********                        latitude = res.latitude;                        longitude = res.longitude;                        //showMap(latitude,longitude);                    },                    cancel: function (res) {                        //无法获取地理位置                        //layer.open({ content: "您拒绝了授权地理位置，将不能获取最近的商铺站点", time: 3 });                    },                    fail: function (res) {                        //无法获取地理位置                        //layer.open({ content: "获取地理位置失败", time: 3 });                    }                });            });            wx.error(function(res){    //微信验证失败                //layer.open({ content: "获取地理位置失败", time: 3 });            });        }    });    //微信JS-SDK 获取当前位置经纬度 结束

关于微信JSSDK的使用方法，可以参考http://blog.csdn.net/chenxueshanblog/article/details/78740931

根据经纬度调用腾讯地图

showMap(39.9244100000,116.5184500000);      //假设要以这个地址为中心点显示地图function showMap(latitude, longitude){    var map = new qq.maps.Map(document.getElementById("mapBox"),{    //地图部分初始化        zoom: 15,               //设置地图缩放级别        center: new qq.maps.LatLng(latitude, longitude),     //设置中心点        zoomControl: false,    //不启用缩放控件        mapTypeControlOptions: {  //设置控件的地图类型为普通街道地图            mapTypeIds: qq.maps.MapTypeId.ROADMAP        }    });    var info = new qq.maps.InfoWindow({ map: map });      //添加提示窗    var result = { "code":0, "msg":"success", "data":[ {"id":1,"name":"第5个商铺","locate":"广东省深圳市龙岗区坂田五和大道与吉华路交汇处","latitude":"39.9254100000", "longitude":"116.5220000000"}, {"id":2,"name":"我是最远的","locate":"北京市防过热合同然后他忽然北京市防过热合同然后他忽然北京市防过热合同然后他忽然","latitude":"39.91800000", "longitude":"116.518000000"}, {"id":3,"name":"最近的商铺","locate":"辽宁省个合同然后他发热感惹发热个体个体","latitude":"39.9244100000", "longitude":"116.5174500000"}, {"id":4,"name":"第4个商铺","locate":"第4个第4个第4个第4个第4个第4个","latitude":"39.92600000", "longitude":"116.5194500000"}, {"id":5,"name":"第二近的商铺","locate":"第5个第5个第5个第5个第5个第5个","latitude":"39.92300000", "longitude":"116.5200000000"}]};    //result中数据 用于显示标记、和标记点击时的提示信息    if(result.code==0 && result.msg=="success"){        for(var i=0; i<result.data.length; i++){            var data = result.data[i];            var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(data.latitude, data.longitude), map: map });    //创建标记            //***将必要的数据存入每一个对应的marker对象            marker.id = data.id;            marker.name = data.name;            marker.locate = data.locate;            qq.maps.event.addListener(marker, 'click', function() {    //获取标记的点击事件                info.open();  //点击标记打开提示窗                info.setContent('<div class="mapInfo"><p class="center">'+this.name+'</p><p>'+this.locate+'</p><button type="button" onclick="bindShop(\''+this.id+','+this.position.lat+','+this.position.lng+'\')">绑定商铺</button></div>');  //***设置提示窗内容（这里用到了marker对象中保存的数据）                info.setPosition(new qq.maps.LatLng(this.position.lat, this.position.lng));  //提示窗位置            });        }    }else{        //layer.open({ content: "获取附近商铺失败", skin: 'msg', time: 2 });    }}function bindShop(shopInfo){    //地图标注提示窗上按钮 点击后执行的函数    alert(shopInfo);  //传过来的包含 id/经度/纬度 的字符串参数}

要引入的文件：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script><script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script><script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><!--<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>-->

HTML代码：

<div class="mapBox">    <div id="mapBox">        <p id="mapInfo"></p>    </div></div>

CSS代码：

body { height:100vh; background: #fff; color: #3D3D3D; }.mapBox { width: 100vw; font-size: 14px; height: 100vh; }.mapBox > #mapInfo { padding: 20px; }.mapBox > div { width: 100%; height: 100%; }.mapBox > p { padding: 20px; }.addShop { display: block; color: #fff; background: #00CC99; border: none; font-size: 14px; width: 50vw; margin: 0.4rem 0 0 25vw; padding: 0.32rem; border-radius: 0.8rem; }.mapInfo > p.center { text-align: center; }.mapInfo > p { line-height: 0.533333rem; }.mapInfo > button { display: block; margin: 0.106667rem auto; color: #0c9; background: #fafafb; border: 1px solid #0c9; border-radius: 0.133333rem; padding: 0.15rem 0.3rem; }

效果图

题外话：后续还需要补充：站点搜索功能