最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - LatitudeLongitude coordinates are not correct in amMap USA map - Stack Overflow

programmeradmin1浏览0评论

I am building a map using the usaLow.js map. On map init, I call a json method that returns this data:

[{latitude: "40.4258686",longitude: "-86.9080655"}]

With this data I add to the map's data provider (mapData) with this:

mapData.images = [];
for(var i = 0; i < resp.length; ++i){
  mapData.images.push({
    type: "circle",
    color:"#FF0000",
    latitude: parseFloat(resp[i].latitude),
    longitude: parseFloat(resp[i].longitude)
  });
}
map.validateData();

This location should be in Indiana, but this is where I see the marker:

Do lat/long coordinates need to be converted when not using world maps? If so, how can that be done?

edit: Fixed JSON string typo

I am building a map using the usaLow.js map. On map init, I call a json method that returns this data:

[{latitude: "40.4258686",longitude: "-86.9080655"}]

With this data I add to the map's data provider (mapData) with this:

mapData.images = [];
for(var i = 0; i < resp.length; ++i){
  mapData.images.push({
    type: "circle",
    color:"#FF0000",
    latitude: parseFloat(resp[i].latitude),
    longitude: parseFloat(resp[i].longitude)
  });
}
map.validateData();

This location should be in Indiana, but this is where I see the marker:

Do lat/long coordinates need to be converted when not using world maps? If so, how can that be done?

edit: Fixed JSON string typo

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Nov 18, 2015 at 4:19 Anthony VeachAnthony Veach 3202 silver badges10 bronze badges 4
  • Try adding "centered:false" attribute to the Map Image – bhanu.cs Commented Nov 18, 2015 at 4:38
  • 1 Have you checked the console? Unless it's a typo, your response data is invalid JSON. Try this: [{"latitude": "40.4258686","longitude": "-86.9080655"}]. You're probably seeing a default location. – sideroxylon Commented Nov 18, 2015 at 4:45
  • Hey thanks that is in fact a typo. I didn't include all the data from the JSON object, so I was entering it by hand. – Anthony Veach Commented Nov 18, 2015 at 5:42
  • I did try using "centered:false", but that seems to just adjust if the marker uses the top/left values for the top-left of the marker or the center. This distance wouldn't account for that. – Anthony Veach Commented Nov 18, 2015 at 5:43
Add a ment  | 

2 Answers 2

Reset to default 9

It seems like you are using a non-calibrated US map. (usaLow.js) This map is distorted for visual purposes and thus not patible with real latitude/longitude coordinates.

To work around that, you will need to use one of the maps that are calibrated. The options are these:

Option 1: usa2Low.js

It is Mercator-calibrated for mainland US. The markers should plot OK, except for Alaska and Hawaii, that area displaced.

Option 2: usaMercatorLow.js

This map is fully patible with coordinates, including Alaska and Hawaii. However, it might not look as appealing:

Both of those maps are bundled with JavaScript Maps.

I know this is kind of an old question, but I came up with a solution that might help someone else using AmCharts.maps.usa2High.

If I know that I'm plotting a point in Alaska or Hawaii I can take real lat/lng and scale/translate it to a lat/lng that works on the Ammap. To do this I just needed 2 points on the Ammap In Alaska's case, Anchorage and Juneau. Using the Ammap dev tools I was able to approximate these locations. Here is how I made it work. I used a tool called Big.js to do the math more accurately - https://github./MikeMcl/big.js/

Note: locations is an array that holds my addresses.

                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
                if(locations[index].state.toLowerCase() == 'ak' || locations[index].state.toLowerCase() == 'alaska'){
                    //Use 2 points to translate the coordinates

                    //anchorage
                    //normal coords
                    var ax1 = new Big(61.2180556); 
                    var ay1 = new Big(-149.90027780000003);

                    //ammap coords
                    var bx1 = new Big(20.7413);             
                    var by1 = new Big(-115.1221);


                    //juneau
                    //normal coords
                    var ax2 = new Big(58.3019444);
                    var ay2 = new Big(-134.41972220000002);

                    //ammap coords
                    var bx2 = new Big(18.9596);                 
                    var by2 = new Big(-109.7574);

                    //find the scale of Ammaps Alaska vs. actual lat/lng coords
                    var latScale = (bx1.minus(bx2)).div(ax1.minus(ax2));                        
                    var lngScale = (by1.minus(by2)).div(ay1.minus(ay2));

                    //get the new translated point by using the 2 existing points and 
                    lat = bx2.plus(latScale.times((new Big(lat)).minus(ax2)));
                    lng = by2.plus(lngScale.times((new Big(lng)).minus(ay2)));

                }




                if(locations[index].state.toLowerCase() == 'hi' || locations[index].state.toLowerCase() == 'hawaii'){
                    //Use 2 points to translate the coordinates
                    //honolulu
                    //normal coords
                    var ax1 = new Big(21.3069444); 
                    var ay1 = new Big(-157.85833330000003);

                    //ammap coords
                    var bx1 = new Big(24.1081);                 
                    var by1 = new Big(-104.5377);


                    //normal coords
                    var ax2 = new Big(20.7983626);
                    var ay2 = new Big(-156.33192529999997);

                    //ammap coords
                    var bx2 = new Big(23.5082);                 
                    var by2 = new Big(-102.5078);

                    //find the scale of Ammaps Hawaii vs. actual lat/lng coords
                    var latScale = (bx1.minus(bx2)).div(ax1.minus(ax2));                        
                    var lngScale = (by1.minus(by2)).div(ay1.minus(ay2));

                    //get the new translated point by using the 2 existing points and 
                    lat = bx2.plus(latScale.times((new Big(lat)).minus(ax2)));
                    lng = by2.plus(lngScale.times((new Big(lng)).minus(ay2)));

                }
发布评论

评论列表(0)

  1. 暂无评论