从后面的代码在地图上显示标记

时间:2013-02-12 07:18:46

标签: javascript jquery asp.net google-maps-api-3 jquery-gmap3

我正在尝试实施谷歌地图Jquery版本,即GMAP3

我从以下c#代码

调用脚本

修改

void drawMap(List<beatWithCurrentStatus> mapList, bool IsMap)
{       
    ScriptManager.RegisterStartupScript(this, this.GetType(), "functiona", "designMap(" + ConvertToJSON(mapList) + ");", true);
}

以下是我的脚本

function designMap(JSONData) {
var ll = [];
var address = [];

for (var i = 0; i < JSONData.length; i++) {
    //        ll[i] = '{latLng:\'[' + data[i].lastlatitude + ',' + data[i].lastlongitude + ']\',data:\'' + data[i].lastaddress + '\'}';
    ll[i] = { latLng: [JSONData[i].lastlatitude, JSONData[i].lastlongitude], data: JSONData[i].lastaddress };
}
alert(ll);
$('#mapDiv').gmap3({
    map:
{
    options: {
        center: [JSONData[5].latitude, JSONData[5].longitude],
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        streetViewControl: true
    }

},
    marker: {
        values: ll,
        options: {
            draggable: false
        }
    }

});
}

编辑: 这是我从ConvertToJSON(mapList)函数

获得的JSON
[{"number":1,"accountID":"primecomforts","deviceID":"911227400024706","place":"Noida Region","status":1,"statusString":null,"requestTimestamp":"\/Date(1346265000000)\/","mobileNumber":null,"latitude":28.535516,"longitude":77.391026,"distance":13.64,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(1360653137000)\/","laststatusCode":61715,"lastlatitude":47.787773,"lastlongitude":-2.449187,"lastspeedKPH":0,"lastheading":0,"lastaddress":"D151,56140 Bohal,,France","lastodometerKM":null,"stringDateTime":null,"lastVDOP":"1","lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":2,"accountID":"primecomforts","deviceID":"911227400024706","place":"Delhi Region","status":1,"statusString":null,"requestTimestamp":"\/Date(1346265000000)\/","mobileNumber":null,"latitude":28.635308,"longitude":77.22496,"distance":13.64,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":3,"accountID":"primecomforts","deviceID":"911227400024706","place":"Noida","status":1,"statusString":null,"requestTimestamp":"\/Date(1347474600000)\/","mobileNumber":null,"latitude":28.535516,"longitude":77.391026,"distance":13.64,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":4,"accountID":"primecomforts","deviceID":"911227400023872","place":"State Highway 264, Maharashtra, India","status":1,"statusString":null,"requestTimestamp":"\/Date(1347906600000)\/","mobileNumber":null,"latitude":20.593684,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(1349955039000)\/","laststatusCode":61715,"lastlatitude":27.22787287,"lastlongitude":77.99955692,"lastspeedKPH":0,"lastheading":0,"lastaddress":"Agra, Uttar Pradesh,India","lastodometerKM":null,"stringDateTime":null,"lastVDOP":"21","lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":5,"accountID":"primecomforts","deviceID":"911227400023872","place":"State Highway 264, Maharashtra, India","status":1,"statusString":null,"requestTimestamp":"\/Date(1347993000000)\/","mobileNumber":null,"latitude":20.593685,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":6,"accountID":"primecomforts","deviceID":"911227400023872","place":"233-277324079","status":1,"statusString":null,"requestTimestamp":"\/Date(1348425000000)\/","mobileNumber":null,"latitude":20.593684,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":7,"accountID":"primecomforts","deviceID":"911227400077050","place":"B-89,TEACHERS COLONY ,SAMAYPUR BADLI,DELHI","status":1,"statusString":null,"requestTimestamp":"\/Date(1348597800000)\/","mobileNumber":null,"latitude":20.593684,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(1360642473000)\/","laststatusCode":61715,"lastlatitude":28.63164532,"lastlongitude":77.34991008,"lastspeedKPH":0,"lastheading":-42.464634,"lastaddress":"National Highway 24 Bypass, Vaishali, Ghaziabad, Ghaziabad, Ghaziabad, Uttar Pradesh, 201010, India","lastodometerKM":null,"stringDateTime":null,"lastVDOP":"62","lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null}]

EDIT2:

string ConvertToJSON(List<beatWithCurrentStatus> receivePoints)
{
    JavaScriptSerializer jss1 = new JavaScriptSerializer();
    return jss1.Serialize(receivePoints);
}

我应该如何传递地图中的标记???请帮忙..!我已经尝试了所有方法,但没有一个工作。但是,如果我对值进行硬编码,它会显示在地图上。

请帮助.. :(

1 个答案:

答案 0 :(得分:0)

  1. ll的项目不是对象,您创建字符串(无法像对象一样访问) 请改用:

    ll[i] = {latLng:[JSONData[i].lat,JSONData[i].lng],data:JSONData[i].address};
  2. ll直接传递给标记的values-property,而不是作为数组的项目(ll已经是数组)

  3.     marker: {
            values: ll,
            options: {
                draggable: false
            }
        }

    这些是2个必需的修改,当它仍然无法工作时,你必须至少发布JSONData