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('<div style="text-align:center;white-space:nowrap;' +
// 'margin:10px;">移动标注取货位置</div>');
// 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 }); //}
<div id="app">
<van-cell-group>
<van-row>
<van-col span="21">
<van-field v-model="OriginAddr" name="OriginAddr" label="发货地址" placeholder="街道门牌、楼层房间号等信息" ></van-field>
</van-col>
<van-col span="3" class="lh44">
<van-icon v-on:click="addressmap(1)" class="iconfont iconmap1" style="font-size: 0.44rem; padding:5px 10px 5px 0;" class-prefix='iconmap1' name="iconmap1"></van-icon>
</van-col>
</van-row>
</van-cell-group>
<div style="display:none;">
<div>取货地址：
<div id="addr"></div>
@*<a id="openLocation">查看位置</a>*@
<a id="updLocation">点击更换地址</a>
</div>
<div>经度：<input id="hidLng" value="120.380959" type="text"/></div>
<div>纬度：<input id="hidLat" value="36.064937" type="text"/></div>
<div onclick="GoApp(1)">腾讯地图APP</div>
<div onclick="GoApp(2)">高德地图APP</div>
<div onclick="GoApp(3)">百度地图APP</div>
<div>当前位置的经度：<input id="hidNowLng" value="120.380959" type="text"/></div>
<div>当前位置的纬度：<input id="hidNowLat" value="36.064937" type="text"/></div>
</div>
</div>
<!--地图的容器，必须在根目录-->
<div id="container" style="display:none;"></div>
<!--弹窗地图组件-->
<template id="mymap">
<div>
<div id="linshi"></div>
<div style="padding:16px 16px 0 16px;">
<div id="addr" style="height: 25px;"></div>
<!--<div>经度：<input id="hidLng" value="120.380959" type="text"/></div>-->
<!--<div>纬度：<input id="hidLat" value="36.064937" type="text"/></div>-->
<!--<div>当前位置的经度：<input id="hidNowLng" value="120.380959" type="text"/></div>-->
<!--<div>当前位置的纬度：<input id="hidNowLat" value="36.064937" type="text"/></div>-->
</div>
<van-row style="padding:16px;">
<van-col span="11">
<van-button type="warning" style="100%;" v-on:click="myclosemap" native-type="button">取消</van-button>
</van-col>
<van-col span="2"></van-col>
<van-col span="11">
<van-button type="info" style="100%;" v-on:click="mysubmap" native-type="button">确认</van-button>
</van-col>
</van-row>
</div>
</template>
<script charset="utf-8" src="/Scripts/jweixin-1.6.0.js "></script>
<script type="text/javascript" charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=7M5BZ-EXN6D-SLM4J-PCA26-K56E2-VFBOH"></script>
<script type="text/javascript" src="/Scripts/map.js "></script>
//点击小图标展开地图
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)
})
},