地图

let mapProvince = '';
let mapDistrict = '';
let mapCity = '';
let mapStreet = '';
var box = document.getElementById("container");
var center, map, marker, infoWindow, geocoder;
//腾讯地图
$(function () {
    init();
});
function init() {
    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    center = new qq.maps.LatLng($("#hidLat").val(), $("#hidLng").val());
    map = new qq.maps.Map(box, {
        center: center,
        zoom: 15
    });
    //以当前点为坐标添加marker
    newMarker(center);
    //marker = new qq.maps.Marker({
    //    position: center,
    //    draggable: true,
    //    map: map
    //});
    //var label = new qq.maps.Label({
    //    position: center,
    //    map: map,
    //    content: '移动标注取货位置'
    //});

    //地图添加监听事件   获取鼠标单击事件
    qq.maps.event.addListener(map, 'click', function (event) {
        //marker.setMap(null);
        //marker = new qq.maps.Marker({
        //    position:event.latLng,
        //    draggable: true,
        //    map:map
        //});
        //更新地址和坐标信息
        setLatLngAndAddr(event.latLng.lat, event.latLng.lng);
    });
    //添加提示窗
    infoWindow = new qq.maps.InfoWindow({
        map: map
    });
    //qq.maps.event.addListener(marker, 'click', function () {
    //    infoWindow.open();
    //    infoWindow.setContent('
//    'margin:10px;">移动标注取货位置
');
    //    infoWindow.setPosition(center);
    //});
    //逆地址解析
    geocoder = new qq.maps.Geocoder({
        complete: function (result) {
            //alert('解析成功：' + result.detail.address);
            mapProvince = result.detail.addressComponents.province;
            mapCity = result.detail.addressComponents.city;
            mapDistrict = result.detail.addressComponents.district;

if(result.detail.addressComponents.streetNumber != ''){
    mapStreet = result.detail.addressComponents.streetNumber;
}else if(result.detail.addressComponents.streetNumber == '' && result.detail.addressComponents.street != ''){
    mapStreet = result.detail.addressComponents.street;
}else{
    mapStreet = result.detail.addressComponents.town;
}

 $("#addr").html(result.detail.address); } }); //更换地址 $("#updLocation").on('click',function () { $("#container").css("display", ""); }); // $("#updLocation").click(function () { // $("#container").css("display", ""); // }); } //微信配置 wx.config({ debug: false, // 开启调试模式 appId: "@ViewBag.appId", timestamp: "@ViewBag.timestamp", nonceStr: "@ViewBag.nonceStr", signature: "@ViewBag.signature", jsApiList: [ 'getNetworkType',//网络状态接口 'openLocation',//使用微信内置地图查看地理位置接口 'getLocation' //获取地理位置接口 ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function () { //获取当前地理位置  get_now_location(); //// 查看地理位置 //$("#openLocation").click(function () { // alert($("#hidLat").val() + "==" + $("#hidLng").val()); // wx.openLocation({ // latitude: parseFloat($("#hidLat").val()), // longitude: parseFloat($("#hidLng").val()), // name: '这是哪？', // address: '详细地址我也不清楚', // scale: 14, // infoUrl: 'http://weixin.qq.com' // }); //});  }); function get_now_location() { wx.getLocation({ type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: function (res) { //console.log(res); var latitude = res.latitude; var longitude = res.longitude; //alert(JSON.stringify(res)); //保存获取当前位置的经纬度 $("#hidNowLat").val(latitude); $("#hidNowLng").val(longitude); //更新地址和坐标信息  setLatLngAndAddr(latitude, longitude); //$("#hidLat").val(latitude); //$("#hidLng").val(longitude); ////逆地址解析 //var coord = new qq.maps.LatLng(latitude, longitude); //geocoder.getAddress(coord);  }, cancel: function (res) { alert('用户拒绝授权,无法获取地理位置'); } }); } function setLatLngAndAddr(latitude, longitude) { var coord = new qq.maps.LatLng(latitude, longitude); map.setCenter(coord); //以当前点为坐标添加marker  newMarker(coord); $("#hidLat").val(latitude); $("#hidLng").val(longitude); //逆地址解析  geocoder.getAddress(coord); } function newMarker(coordinate) { if (marker != null) { marker.setMap(null); } marker = new qq.maps.Marker({ position: coordinate, draggable: true, map: map }); //marker事件 qq.maps.event.addListener(marker, 'dragend', function (event) { //更新地址和坐标信息  setLatLngAndAddr(event.latLng.lat, event.latLng.lng); }); qq.maps.event.addListener(marker, 'click', function (event) { //更新地址和坐标信息  setLatLngAndAddr(event.latLng.lat, event.latLng.lng); }); } function GoApp(typeID) { //获取的当前位置 var nowLng = $("#hidNowLng").val(); var nowLat = $("#hidNowLat").val(); //目的地 var lng = $("#hidLng").val(); var lat = $("#hidLat").val(); var addr = $("#addr").html(); if (typeID == 1) {//腾讯APP http://lbs.qq.com/webApi/uriV1/uriGuide/uriWebRoute window.location.href = "http://apis.map.qq.com/uri/v1/routeplan?type=drive&from=当前位置&fromcoord=" + nowLat + "," + nowLng + "&to=" + addr + "&tocoord=" + lat + "," + lng + "&policy=0&referer=wuliupingtai"; } else if (typeID == 2) {//高德APP https://lbs.amap.com/api/uri-api/guide/travel/route window.location.href = "https://uri.amap.com/navigation?from=" + nowLng + "," + nowLat + ",当前位置&to=" + lng + "," + lat + "," + addr + "&mode=car&policy=0&coordinate=gaode&callnative=1&src=wuliupingtai"; } else if (typeID == 3) {//百度APP http://lbsyun.baidu.com/index.php?title=uri/api/web window.location.href = "http://api.map.baidu.com/direction?origin=name:当前位置|latlng:" + nowLat + "," + nowLng + "&destination=latlng:" + lat + "," + lng + "|name:" + addr + "&origin_region=起点城市&destination_region=终点城市&mode=driving&coord_type=gcj02&output=html&src=wuliupingtai"; } } //百度地图 http://api.map.baidu.com/direction?origin=latlng:36.064937,120.380959|name:当前位置&destination=latlng:40.010024,116.392239|name:您的位置&origin_region=青岛&destination_region=西安&mode=driving&coord_type=gcj02&output=html&src=wuliupingtai //高德地图 https://uri.amap.com/navigation?from=120.380959,36.064937,当前位置&to=116.392239,40.010024,您的位置&mode=car&policy=0&coordinate=gaode&callnative=1&src=wuliupingtai //$(function () { // GetGPSLocation(); //}); ////GPS获取当前坐标位置cityNameID-放城市名称容器的ID typeID=0是从Default页面来要去index页 =1是文本框 =2是div //function GetGPSLocation() { // // alert("hello"); // var map = new BMap.Map("container"); // var point = new BMap.Point(120.380959, 36.064937); //new BMap.Point(116.414106, 39.897034); // map.centerAndZoom(point, 15); // var marker = new BMap.Marker(point); // map.addOverlay(marker); // var geolocation = new BMap.Geolocation(); // geolocation.getCurrentPosition(function (r) { // if (this.getStatus() == BMAP_STATUS_SUCCESS || this.getStatus() == 0) { // map.removeOverlay(marker); // alert('您的位置：' + r.point.lng + ',' + r.point.lat + ',' + this.getStatus()); // marker = new BMap.Marker(r.point); // map.addOverlay(marker); // map.panTo(r.point); // $("#hidLng").val(r.point.lng); // $("#hidLat").val(r.point.lat); // } // else { // alert('failed' + this.getStatus()); // } // }); // ////实例化浏览器定位对象。 // //var geolocation = new bmap.geolocation(); // ////定位结果对象会传递给r变量 // //geolocation.getcurrentposition(function (r) { // // alert("this.getstatus()=" + this.getstatus()); // // //通过geolocation类的getstatus()可以判断是否成功定位。 // // if (this.getstatus() == bmap_status_success || this.getstatus() == 0) { // // //获取gps定位得到的点 // // point = r.point; // // alert(r.point.lng + "??" + r.point.lat); // // //$("#hidlng").val(r.point.lng); // // //$("#hidlat").val(r.point.lat); // // //setbaidugeocoder(r.point.lng, r.point.lat, citynameid, typeid); // // } // // else { // // alert('failed' + this.getstatus()); // // //getjbox("green", "开启gps可自动定位"); // // } // //}, { enablehighaccuracy: true }); //}

    

        
取货地址：
            

            @*查看位置*@
            点击更换地址
        
        
经度：
        
纬度：
        
腾讯地图APP
        
高德地图APP
        
百度地图APP
        
当前位置的经度：
        
当前位置的纬度：
    

//点击小图标展开地图
        addressmap(num){
            if(num == 1){
                this.curNum = 1;//始发地
                //如果已经设置过经纬值，再次定位的情况下，可以将坐标定位到上次设置的地点
                if(this.address1["Lat"] != undefined && this.address1["Lat"] != 0){
                    setLatLngAndAddr(this.address1["Lat"], this.address1["Lng"]);
                }
            }else{
                this.curNum = 2;//目的地
                //如果已经设置过经纬值，再次定位的情况下，可以将坐标定位到上次设置的地点
                if(this.address2["Lat"] != undefined && this.address2["Lat"] != 0){
                    setLatLngAndAddr(this.address2["Lat"], this.address2["Lng"]);
                }
            }
            let self = this;
            this.addarea_map = true;//展开地图
            //将地图容器显示设置宽高
            $("#container").css({"display":"block","width":"100%","height":"350px"});
            //console.log($("#container"));
            this.$nextTick(function(){
                //让地图html码插入子组件容器
                $("#linshi").append($("#container"))
            })
            //console.log($("#hidNowLng").val(),$("#hidNowLat").val());
            //console.log($("#hidLng").val(),$("#hidLat").val());
        },
        //关闭地图
        closemap(){
            this.addarea_map = false;
        },
        //确认地图
        submap(){
            let pcode = 0,ccode = 0,acode = 0;
            if(encodeURI(mapProvince) == encodeURI(mapCity)){
                mapCity = '市辖区'
            }
            this.getMapCodeFn(mapProvince,mapCity,mapDistrict,this.curNum)
            //console.log(mapProvince,mapCity,mapDistrict,mapStreet)
            //判断现在展开的是始发地或目的地
            if(this.curNum == 1){
                //经纬度
                this.address1["Lng"] = /^(\d+)(\.\d{7})?/.exec($("#hidLng")[0].value)[0];//经度（最多保留7位小数），未取值默认传0
                this.address1["Lat"] = /^(\d+)(\.\d{7})?/.exec($("#hidLat")[0].value)[0];//纬度（最多保留7位小数），未取值默认传0
                //console.log($("#hidLng")[0].value,$("#hidLat")[0].value,$("#hidNowLng")[0].value,$("#hidNowLat")[0].value,$("#addr").text())
            }else{
                this.address2["Lng"] = /^(\d+)(\.\d{7})?/.exec($("#hidLng")[0].value)[0];//经度（最多保留7位小数），未取值默认传0
                this.address2["Lat"] = /^(\d+)(\.\d{7})?/.exec($("#hidLat")[0].value)[0];//纬度（最多保留7位小数），未取值默认传0
                //console.log($("#hidLng")[0].value,$("#hidLat")[0].value,$("#hidNowLng")[0].value,$("#hidNowLat")[0].value,$("#addr").text())
            }
            //console.log(this.address1,this.address2)
        },


        //通过省市区名称获取code
        async getMapCodeFn(province,city,area,num){
            //num也可以不传的直接拿this.curNum
            let self = this;
            await getMapCode(province,city,area).then(msg => {
                //console.log(msg.status.sub_msg)
                if (msg.status.code == 1) {
                    let ary = msg.status.sub_msg.split(',');
                    if(num == 1){
                        //1始发地
                        this.screenval1 = city + "-" + area;//始发地不显示省province + "-" +
                        this.address1["OProvince"] = province;
                        this.address1["OCity"] = city;
                        this.address1["OArea"] = area;
                        this.address1["OPCode"] = ary[0];
                        this.address1["OCCode"] = ary[1];
                        this.address1["OACode"] = ary[2];

                        this.OriginAddr = mapStreet;
                        this.addarea_map = false;
                    }else{
                        //2目的地
                        // this.screenval2 = city + "-" + area;//province + "-" +
                        // this.address2["DProvince"] = province;
                        // this.address2["DCity"] = city;
                        // this.address2["DArea"] = area;
                        // this.address2["DPCode"] = ary[0];
                        // this.address2["DCCode"] = ary[1];
                        // this.address2["DACode"] = ary[2];
                        //
                        // this.addarea_map = false;
                    }
                //console.log(this.address1,this.address2)
                } else {
                    self.$toast(msg.status.msg)
                    return;
                };
            }).catch(msg=>{
                console.log(msg)
                //self.$toast(msg)
            })
        },