echarts-bot[bot] commented on issue #16884:
URL: https://github.com/apache/echarts/issues/16884#issuecomment-1098841755
@N-Ting It seems you are not using English, I've helped translate the
content automatically. To make your issue understood by more people and get
helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Feature] The problem of inaccurate latitude and longitude of markPoint
**BODY**
### Version
5.0.0
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
I drew a map of Zengcheng District, and then I wanted to mark the markPoint,
point on it, and found that the latitude and longitude position did not match
the actual position
### Current Behavior
// Baidu coordinates to Gaode (incoming longitude and latitude)
function bd_decrypt(bd_lng, bd_lat) {
var X_PI = Math.PI * 3000.0 / 180.0;
var x = bd_lng - 0.0065;
var y = bd_lat - 0.006;
var z = Math. sqrt(x * x + y * y) - 0.00002 * Math. sin(y * X_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math. sin(theta);
return [gg_lng,gg_lat]
}
// click on the map of the area
function areaMap(json,data) {
var jsonb = JSON.stringify(data);
var arr = JSON.parse(jsonb.replace(/streetName/g,"name"));
var arr1 =JSON.stringify(arr);
arr = JSON.parse(arr1.replace(/craneTotal/g,"value"));
arr.forEach(item=>{
item.coord = bd_decrypt(item.coord[0],item.coord[1])
})
console.log(arr)
var optionData = {
geo:{
map:'area',
roam: true,
// zoom: 1.2,
label: {
emphasis: {
show: false, // enable floating event
// color: "#fff",
},
},
itemStyle: {
color: '#ddb926',
normal: {
borderWidth: 1,//The size of the border
borderColor:'#37A5D5',//border line color
areaColor:'#04097D',//Default area color
},
emphasis: {
show: false,
areaColor: '#04097D',//The color of the area where
the mouse slides over
}
},
},
series: [{
name:"data",
// type: "effectScatter",
coordinateSystem: "geo",
type: "custom",
markPoint: {
formatter:function(params){
return '<img src="'
+params.data.symbol.replace('image://','')
+'"/>'
},
// text position
label:{
show: true,
width:195,
// display name and value
formatter: '{b} {c}',
overflow:'break',
ellipsis:'...',
// position of label
position: [10,15],
color:'#fff',
fontSize:16
},
// The picture above the histogram is displayed
// coord:[0,10], one parameter is the index of the
column chart we want to add, and the second is the value of the column chart,
that is, the data we display on the column chart
// symbol: is the path where we added the icon, the
format is image://+image path
data: arr,
// symbolOffset: The position of our icon on the
histogram, representing the offset of the x and y axes respectively
symbolSize:[160,110],
// symbolOffset: [100,0]
},
lineStyle: {
normal: {
color: "#fff",
width: 0,
opacity: 0.6,
curveness: 0.2,
},
},
itemStyle: {
normal: {
color: '#44e5e0',
shadowBlur: 10,
shadowColor: "#333",
},
},
},
]
};
$.get(json,function (sr) {
// debugger
// var srJson = []
// sr.features[0].geometry.coordinates[0][0].forEach(item=>{
// var Json = qqMapTransBMap(item[0],item[1])
// srJson.push(Json)
// })
// debugger
// sr.features[0].geometry.coordinates[0][0] = srJson
echarts.registerMap('area', sr);
// $('#gz').html('<div id="chart1" style="width: 100%;height:
100%;"></div>')
var chart = echarts.init(document.getElementById('gz'))
var option = optionData;
console.log(echarts.version);
chart.setOption(option,true);
callback1 = (params) => evenFn(params, optionData, chart)
chart.off('click');
chart.on('click', callback1);
// Return to Guangzhou map when clicking on the blank area of
the canvas
// chart.getZr().off('click')
chart.getZr().on('click', function (params) {
// When you click on the blank to return to the city, the
drop-down in the upper left corner also displays the city
$('.title .right-header').text('The whole city');
$('.areaClass li').each(function (i, item){
if (i====0){
$(this).addClass('select-this').siblings('li').removeClass('select-this');
areaType = $(this).attr('data-method')
}
});
if (params.target) {
return false
}else{
gzMap(positionArray,'js/app/json/gz.json',equipmentType)
}
});
window.addEventListener("resize", function () {
// Let our chart call the resize method
chart.resize();
});
})
}
### Expected Behavior
markPoint latitude and longitude match the actual map
### Environment
````markdown
- OS:
- Browser:
- Framework:
````
### Any additional comments?
_No response_
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
