小编pin*_*ksy的帖子

我需要在地图div的固定像素位置放置一个标记.要实例化标记,您需要一个LatLng.我知道fromDivPixelToLatLng()是从像素坐标转换为LatLng的方法,但我不能让它表现得一致.

我在http://www.pinksy.co.uk/newsquare/overlaytest.html上发布了一个简单的问题示例.单击地图以200px/200px放置标记.拖动地图并再次单击.我期待每次将标记放置在200px/200px,但事实并非如此.

首先,我像往常一样设置地图,在600px乘300px div:

var london = new google.maps.LatLng(51.501904,-0.130463);
var mapOptions = {
    zoom: 15,
    center: london,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

然后我创建一个叠加层:

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

为了测试fromDivPixelToLatLng(),我在地图上创建了一个点击事件,它试图在200像素/ 200像素的像素位置放置一个标记.无论你在哪里拖动地图,我都希望标记总是放在200px/200px:

google.maps.event.addListener(map, 'click', function(event) {

    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(200,200));

    var marker = new google.maps.Marker({
        position: pixelLatLng,
        map: map
    });
});

但是,拖动地图,您会看到标记并不总是放在200px/200px处.有任何想法吗？

谢谢!

我有以下简单的脚本:

var fruits = new Array("apple","orange","lemon");

$("#fruit_canvas").append("Mouse over these fruits:");

for(var i = 0; i < fruits.length; i++)
{
    var fruit = fruits[i];
    var html = "<div id='fruit" + i + "'>" + fruit + "</div>";
    var fruitdiv = $(html);
    $("#fruit_canvas").append(fruitdiv);

    google.maps.event.addDomListener($(fruitdiv)[0], 'mouseover', function() {
        $("#result_canvas").append("Mouse over " + fruit);
    });

    google.maps.event.addDomListener($(fruitdiv)[0], 'mouseout', function() {
        $("#result_canvas").empty();
    });
}

它遍历一个简单的数组,使用jQuery从每个元素中创建一个div,然后将它追加到另一个div.然后将Google Maps DOM侦听器添加到每个附加的div中.这一切都很好,但是DOM监听器似乎只知道数组的最后一个元素,即它总是返回"lemon"作为水果,无论你将鼠标悬停在哪个div上.

要查看我的意思,请访问http://www.pinksy.co.uk/maptest.html并将鼠标悬停在每个div上.

我确定这与我如何将DOM元素传递给DOM侦听器有明显的关系,但我不确定如何!

我也尝试过没有jQuery,但得到相同的结果:

document.getElementById('fruit_canvas2').appendChild(document.createTextNode("Mouse over these fruits:"));

for(var i = 0; i < fruits.length; i++)
{
    var …

我试图用角度调用一个Web服务,但没有太多运气.该服务接受没有POST主体的POST请求,并返回XML.我可以确认该服务使用原始XMLHttpRequest调用:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4)
    console.log(xhr.responseText); // Returns data
}

xhr.open("POST", "https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML", true);

xhr.send(null);

并使用jQuery:

$.ajax({
  url: 'https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML',
  type: "POST",
  success: function(data){
    console.log(data); // Returns data
  },
  error: function (hxr, status, errorThrown){
    console.log(status);
  }
});

但是,当我使用angular的$ http服务尝试时,我没有得到任何回报:

angular.module('TestApp',[])
.controller('TestController', function($scope, $http){
    $http({
        method: "POST",
        url: 'https://api.bmreports.com/BMRS/MessageListRetrieval/v1/?APIKey=9eu73tsryf1sons&ParticipantId=INNOGY01&PublicationFrom=1970-01-01&PublicationTo=3000-01-01&ServiceType=XML'
    }).success(function(data, status, headers, config){
        console.log("data:");
        console.log(data); // Returns null
    }).error(function(data, status, headers, config){
        console.log("error status:");
        console.log(status); // No errors returned      
    })
})

编辑:使用$ http.post快捷方式:

angular.module('TestApp',[])
.controller('TestController', function($scope, …