var option = {
tooltip: {
trigger: 'item'
},
geo: {
type: 'effectScatter',
center: [104.5,34.5],
zoom: 1.6,
map: "china",
roam: true,
label: {
normal: {
show: true, //省份名称
textStyle: {
fontSize: 8,//图形文字的大小
}
},
},
itemStyle: {
normal: {
borderWidth: 1,//区域边框宽度
borderColor: '#FFFFFF',//区域边框颜色
areaColor:"#5D53A5",//区域颜色
},
emphasis: {
borderWidth: 1,
borderColor: '#4b0082',
areaColor:"#ffdead",
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
data: [
{
name: '上海',
value: [121.47,31.23, 55]
},
{
name: '北京',
value: [116.40,39.90, 110]
},
{
name: '重庆',
value: [106.55,29.56, 32] // value的前两项是经纬度坐标,第三项为污染度数据
}
],
}
]
},
}
你好这是我的地图实例 也设置标记 但是我的标记点一直不显示 这是为什么
麻烦解答一下 谢谢
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
您好,根据您提供的代码,您的标记点没有显示可能是因为您的 series
属性被包含在 geo
属性中,导致 geo
属性不能正确解析 series
数据。您可以将 series
属性移动到和 geo
同级别的位置,即和 tooltip
属性一样,如下所示:
var option = {
tooltip: {
trigger: 'item'
},
geo: {
type: 'effectScatter',
center: [104.5, 34.5],
zoom: 1.6,
map: "china",
roam: true,
label: {
normal: {
show: true,
textStyle: {
fontSize: 8,
}
},
},
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#FFFFFF',
areaColor: "#5D53A5",
},
emphasis: {
borderWidth: 1,
borderColor: '#4b0082',
areaColor: "#ffdead",
}
},
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
data: [
{
name: '上海',
value: [121.47, 31.23, 55]
},
{
name: '北京',
value: [116.40, 39.90, 110]
},
{
name: '重庆',
value: [106.55, 29.56, 32]
}
],
}
]
};
在这个修改后的代码中,您会发现 series
属性已经和 tooltip
属性同级别,并且它们都是 option
对象的属性。这样修改后,您应该就能够成功显示标记点了。
希望这个解答能够帮到您!
如果以上回答对您有所帮助,点击一下采纳该答案~谢谢
申请百度开发秘钥AK
http://lbsyun.baidu.com/apiconsole/key
在vue的index.html里加入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你申请的AK"></script>
npm install echarts --save
import echarts from "echarts/lib/echarts";
import 'echarts/extension/bmap/bmap' //百度地图
接下来可以编写实现代码啦~