Web API与客户端应用程序的问题 [英] Problem in Web API with Client Application

查看：98
本文介绍了Web API与客户端应用程序的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

亲爱的朋友们，

我已经创建了Web API并在Web应用程序中使用，问题是我试图使用Google API加载Google Map，它在IE中运行良好，但在Firefox中不起作用和谷歌Chrome一样，因为Jquery Ajax不能在firefox中工作，请查看我的以下代码



<！DOCTYPE html>

< html xmlns =http://www.w3.org/1999/xhtml>

< head>





< title> Always Money< / title>

< link href =css / always_money.css =stylesheet/>

< link rel =stylesheethref =css / clndr.css>

<！ - slider css - >

< link rel =stylesheethref =css / iview.css/>



<！ - 对于地点地图 - >

< title>< / title>

< style>

#map_canvas {

宽度：600px;

身高：500px;

}

.map_head ing {

font-size：13px;

}

#map_canvas {max-width：none; }

< / style>



< script src =http://code.jquery.com/jquery-latest.min.jstype =text / javascript>< ; / script>

< script src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>

< script>

函数LatLong（）{

尝试{

调试器

//地理编码器= new google.maps.Geocoder（）;

var txtsearch = document.getElementById（txtsearch）。value;

// var rootUrl =http：// + document.location.hostname +：+ window.location.port;

var rootUrl ='http：// localhost：3006'

var apiUrl =' / api / TMGMaps';

var uris = rootUrl + apiUrl;

var controllerPath = uris +'/ GetMapsDetails？strAddress ='+ txtsearch

// jQuery。 support.cors = true;

$ .ajax（{

类型：'获取'，

url：controllerPath，

datatype：'jsonp'，

contentType：application / json; charset = utf-8，

async：false，



成功：函数（数据）{

调试器

if（data [0] .DsMaps.Table.length> 0）{



var map;

var global_markers = [];

var markers = new Array（ ）;;



for（j = 0; j< data [0] .DsMaps.Table.length; j ++）{

marker [j] = [[data [0] .DsMaps.Table [j] .LAT，data [0] .DsMaps.Table [j] .LONG，data [0] .DsMaps.Table [j] .Address]];

}

geocoder = new google.maps.Geocoder（）;

var latlng = new google.maps.LatLng（data [0] .DsMaps.Table [0] .LAT，data [0] .DsMaps.Table [0] .LONG）;

var myOptions = {

zoom：13，

中心：latlng，

mapTypeId：google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;



for（var i = 0;我< markers.length; i ++）{

var lat，lng，trailhead_name;

var j = i

if（i> 0）{

j = 0;

lat = parseFloat（markers [i] [j] [0]）;

lng = parseFloat（markers [i] [j] [1]）;

trailhead_name = markers [i] [j] [2];

}

else {

lat = parseFloat（markers [i] [i] [0]）;

lng = parseFloat（markers [i] [i] [1]）;

trailhead_name = markers [i] [i] [2];

}



var image ='img / smiley_happy.png';

var myLatlng = new google.maps.LatLng（lat，lng）;

var contentString =< html>< body>

Dear Friends,
I have created Web API and consumed in Web Application, the problem is i have tried to load Google Map using Google API, it work fine in IE, but not work in Firefox and Google Chrome, because Jquery Ajax not working in firefox, kindly check my below coding

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<title>Always Money</title>
<link href="css/always_money.css" rel="stylesheet" />
<link rel="stylesheet" href="css/clndr.css">
<!-- slider css -->
<link rel="stylesheet" href="css/iview.css" />

<!--For Locations Map -->
<title></title>
<style>
#map_canvas{
width: 600px;
height: 500px;
}
.map_heading {
font-size:13px;
}
#map_canvas { max-width:none; }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function LatLong() {
try {
debugger
//geocoder = new google.maps.Geocoder();
var txtsearch = document.getElementById("txtsearch").value;
//var rootUrl = "http://" + document.location.hostname + ":" + window.location.port;
var rootUrl = 'http://localhost:3006'
var apiUrl = '/api/TMGMaps';
var uris = rootUrl + apiUrl;
var controllerPath = uris + '/GetMapsDetails?strAddress=' + txtsearch
//jQuery.support.cors = true;
$.ajax({
type: 'Get',
url: controllerPath,
datatype: 'jsonp',
contentType: "application/json;charset=utf-8",
async: false,

success: function (data) {
debugger
if (data[0].DsMaps.Table.length > 0) {

var map;
var global_markers = [];
var markers = new Array();

for (j = 0; j < data[0].DsMaps.Table.length; j++) {
markers[j] = [[data[0].DsMaps.Table[j].LAT, data[0].DsMaps.Table[j].LONG, data[0].DsMaps.Table[j].Address]];
}
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(data[0].DsMaps.Table[0].LAT, data[0].DsMaps.Table[0].LONG);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (var i = 0; i < markers.length; i++) {
var lat, lng, trailhead_name;
var j = i
if (i > 0) {
j = 0;
lat = parseFloat(markers[i][j][0]);
lng = parseFloat(markers[i][j][1]);
trailhead_name = markers[i][j][2];
}
else {
lat = parseFloat(markers[i][i][0]);
lng = parseFloat(markers[i][i][1]);
trailhead_name = markers[i][i][2];
}

var image = 'img/smiley_happy.png';
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body>

< / body>< / html>;

var marker = new google.maps .Marker（{

职位：myLatlng，

地图：地图，

标题：坐标：+ lat +，+ lng +| Trailhead名称：+ trailhead_name，

icon：image

}）;



marker ['infowindow' ] = contentString;

global_markers [i] = marker;



var infowindow = new google.maps.InfoWindow（{}）;



google.maps.event.addListener（global_markers [i]，'click'，function（）{

infowindow.setContent（this [ 'infowindow']）;

infowindow.open（地图，这个）;

}）;

}

}

else {

var map;

var global_markers = [];

var markers = [[32.3674005，-86.2711843，'1182 ANN STREET']];

geocoder = new google.maps.Geocoder（）;

var latlng = new google.maps.LatLng（32.3674005，-86.2711843）;

var myOptions = {

zoom：13，

center：latlng，

mapTypeId：google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map（document.getElementById（map_canvas） ），myOptions）;





lat = parseFloat（markers [0] [0]）;

lng = parseFloat（markers [0] [1]）;

trailhead_name = markers [0] [2];

var image ='Images / smiley_happy。 png';

var myLatlng = new google.maps.LatLng（lat，lng）;

var contentString =< html>< body>

</body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name,
icon: image
});

marker['infowindow'] = contentString;
global_markers[i] = marker;

var infowindow = new google.maps.InfoWindow({});

google.maps.event.addListener(global_markers[i], 'click', function () {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
else {
var map;
var global_markers = [];
var markers = [[32.3674005, -86.2711843, '1182 ANN STREET']];
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(32.3674005, -86.2711843);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


lat = parseFloat(markers[0][0]);
lng = parseFloat(markers[0][1]);
trailhead_name = markers[0][2];
var image = 'Images/smiley_happy.png';
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body>

< / body>< / html>;

var marker = new google.maps.Marker（{

position：myLatlng，

map：map，

title：Coordinates：+ lat +，+ lng +| Trailhead名称：+ trailhead_name，

icon：image

}）;



marker ['infowindow' ] = contentString;



global_markers [0] = marker;



var infowindow = new google.maps .InfoWindow（{}）;



google.maps.event.addListener（global_markers [0]，'click'，function（）{

infowindow.setContent（this ['infowindow']）;

infowindow.open（map，this）;

}）;





}

}，

错误：函数（x，y，z）{

alert（y）;

}

}）;



}

catch（ex）{

alert（ex.message）;

抛出ex;

}

}

< / script>

< / head>

< body>

<！ - 标题开头 - >

</body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name,
icon: image
});

marker['infowindow'] = contentString;

global_markers[0] = marker;

var infowindow = new google.maps.InfoWindow({});

google.maps.event.addListener(global_markers[0], 'click', function () {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});


}
},
error: function (x,y,z) {
alert(y);
}
});

}
catch (ex) {
alert(ex.message);
throw ex;
}
}
</script>
</head>
<body>
<!-- header starts -->



<！ - 标题结束 - >

<！ - 包装器开始 - >


<!-- header ends -->
<!-- wrapper starts -->





< input type =textid =txtsearch/>

< button id =butLat>搜索地点< / button>



<input type="text" id="txtsearch" />
<button id="butLat" >Search Locations</button>







阿拉巴马州| 密西西比州| 南卡罗来纳州












<！ - 包装结束 - >

<！ - 页脚开始 - >


<!-- wrapper ends -->
<!-- footer starts -->



<！ - 页脚结束 - >

<！ - menu js - >



< script src =js / script.js>< / script>

<！ - calendar js - >



< script src =http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js >< /脚本>



< script>

$（function（）{

$（＃header_content）。load（include / header.html）;

$ （#left_form）。load（include / left_form.html）;

$（＃right_form）。load（include / right_form.html）;

$（＃footer）。load（include / footer.html）;

}）;

< / script>





< / body>

< / html>



先谢谢


<!-- footer ends -->
<!-- menu js -->

<script src="js/script.js"></script>
<!-- calendar js -->

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

<script>
$(function(){
$("#header_content").load("include/header.html");
$("#left_form").load("include/left_form.html");
$("#right_form").load("include/right_form.html");
$("#footer").load("include/footer.html");
});
</script>


</body>
</html>

Thanks in Advance

推荐答案

.ajax（{

类型：'获取'，

url：controllerPath，

数据类型：'jsonp'，

contentType：application / json; charset = utf-8，

async：false，



成功：函数（数据）{

调试器

if（data [data] 0] .DsMaps.Table.length> 0）{



var map;

var global_markers = [];

var markers = new Array（）;



for（j = 0; j< data [0] .DsMaps.Table.length; j ++） {

markers [j] = [[data [0] .DsMaps.Table [j] .LAT，data [0] .DsMaps.Table [j] .LONG，data [0] .DsMaps.Table [j] .Address]] ;

}

geocoder = new google.maps.Geocoder（）;

var latlng = new google.maps.LatLng（data [0 ] .DsMaps.Table [0] .LAT，data [0] .DsMaps.Table [0] .LONG）;

var myOptions = {

zoom：13，

中心：latlng，

mapTypeId：google.maps.MapTypeId.ROADMAP

}

map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;



for（var i = 0;我< markers.length; i ++）{

var lat，lng，trailhead_name;

var j = i

if（i> 0）{

j = 0;

lat = parseFloat（markers [i] [j] [0]）;

lng = parseFloat（markers [i] [j] [1]）;

trailhead_name = markers [i] [j] [2];

}

else {

lat = parseFloat（markers [i] [i] [0]）;

lng = parseFloat（markers [i] [i] [1]）;

trailhead_name = markers [i] [i] [2];

}



var image ='img / smiley_happy.png';

var myLatlng = new google.maps.LatLng（lat，lng）;

var contentString =< html>< body>
.ajax({
type: 'Get',
url: controllerPath,
datatype: 'jsonp',
contentType: "application/json;charset=utf-8",
async: false,

success: function (data) {
debugger
if (data[0].DsMaps.Table.length > 0) {

var map;
var global_markers = [];
var markers = new Array();

for (j = 0; j < data[0].DsMaps.Table.length; j++) {
markers[j] = [[data[0].DsMaps.Table[j].LAT, data[0].DsMaps.Table[j].LONG, data[0].DsMaps.Table[j].Address]];
}
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(data[0].DsMaps.Table[0].LAT, data[0].DsMaps.Table[0].LONG);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (var i = 0; i < markers.length; i++) {
var lat, lng, trailhead_name;
var j = i
if (i > 0) {
j = 0;
lat = parseFloat(markers[i][j][0]);
lng = parseFloat(markers[i][j][1]);
trailhead_name = markers[i][j][2];
}
else {
lat = parseFloat(markers[i][i][0]);
lng = parseFloat(markers[i][i][1]);
trailhead_name = markers[i][i][2];
}

var image = 'img/smiley_happy.png';
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body>

< / body>< / html>;

var marker = new google.maps .Marker（{

职位：myLatlng，

地图：地图，

标题：坐标：+ lat +，+ lng +| Trailhead名称：+ trailhead_name，

icon：image

}）;



marker ['infowindow' ] = contentString;

global_markers [i] = marker;



var infowindow = new google.maps.InfoWindow（{}）;



google.maps.event.addListener（global_markers [i]，'click'，function（）{

infowindow.setContent（this [ 'infowindow']）;

infowindow.open（地图，这个）;

}）;

}

}

else {

var map;

var global_markers = [];

var markers = [[32.3674005，-86.2711843，'1182 ANN STREET']];

geocoder = new google.maps.Geocoder（）;

var latlng = new google.maps.LatLng（32.3674005，-86.2711843）;

var myOptions = {

zoom：13，

center：latlng，

mapTypeId：google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map（document.getElementById（map_canvas） ），myOptions）;





lat = parseFloat（markers [0] [0]）;

lng = parseFloat（markers [0] [1]）;

trailhead_name = markers [0] [2];

var image ='Images / smiley_happy。 png';

var myLatlng = new google.maps.LatLng（lat，lng）;

var contentString =< html>< body>

</body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name,
icon: image
});

marker['infowindow'] = contentString;
global_markers[i] = marker;

var infowindow = new google.maps.InfoWindow({});

google.maps.event.addListener(global_markers[i], 'click', function () {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
else {
var map;
var global_markers = [];
var markers = [[32.3674005, -86.2711843, '1182 ANN STREET']];
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(32.3674005, -86.2711843);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


lat = parseFloat(markers[0][0]);
lng = parseFloat(markers[0][1]);
trailhead_name = markers[0][2];
var image = 'Images/smiley_happy.png';
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body>

< / body>< / html>;

var marker = new google.maps.Marker（{

position：myLatlng，

map：map，

title：Coordinates：+ lat +，+ lng +| Trailhead名称：+ trailhead_name，

icon：image

}）;



marker ['infowindow' ] = contentString;



global_markers [0] = marker;



var infowindow = new google.maps .InfoWindow（{}）;



google.maps.event.addListener（global_markers [0]，'click'，function（）{

infowindow.setContent（this ['infowindow']）;

infowindow.open（map，this）;

}）;





}

}，

错误：函数（x，y，z）{

alert（y）;

}

}）;



}

catch（ex）{

alert（ex.message）;

抛出ex;

}

}

< / script>

< / head>

< body>

<！ - 标题开头 - >

</body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name,
icon: image
});

marker['infowindow'] = contentString;

global_markers[0] = marker;

var infowindow = new google.maps.InfoWindow({});

google.maps.event.addListener(global_markers[0], 'click', function () {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});


}
},
error: function (x,y,z) {
alert(y);
}
});

}
catch (ex) {
alert(ex.message);
throw ex;
}
}
</script>
</head>
<body>
<!-- header starts -->



<！ - 标题结束 - >

<！ - 包装器开始 - >


<!-- header ends -->
<!-- wrapper starts -->





< input type =textid =txtsearch/>

< button id =butLat>搜索地点< / button>



<input type="text" id="txtsearch" />
<button id="butLat" >Search Locations</button>







阿拉巴马州| 密西西比州| 南卡罗来纳州












<！ - 包装结束 - >

<！ - 页脚开始 - >


<!-- wrapper ends -->
<!-- footer starts -->



<！ - 页脚结束 - >

<！ - menu js - >



< script src =js / script.js>< / script>

<！ - calendar js - >



< script src =http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js >< /脚本>



< script>


<!-- footer ends -->
<!-- menu js -->

<script src="js/script.js"></script>
<!-- calendar js -->

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

<script>


（function（）{
(function(){


（＃header_content）。load（include / header.html ）;
("#header_content").load("include/header.html");


这篇关于Web API与客户端应用程序的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆