移动端-百度地图使用

最新推荐文章于 2023-08-17 14:39:46 发布

codingFunTime

最新推荐文章于 2023-08-17 14:39:46 发布

阅读量169

点赞数

分类专栏： coderwhy 文章标签： android javascript html

本文链接：https://blog.csdn.net/hktkkkk/article/details/130155877

版权

coderwhy 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Android定位SDK - 入门指南 | 百度地图API SDK

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <link rel="icon" href="/favicon.ico" />

  <title>弘源旅途</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script type="text/javascript"
    src="https://api.map.baidu.com/getscript?v=3.0&type=webgl&ak=v2YcidGrBd9UTuowYgQQMFNP6GG3Lc7o"></script>
  <script type="text/javascript"
    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=v2YcidGrBd9UTuowYgQQMFNP6GG3Lc7o"></script>
</body>

</html>

<template>
  <div class="home">
    <detail-section title="位置周边" more-text="查看更多周边信息">
      <div class="baidu" ref="mapRef"></div>
    </detail-section>
  </div>
</template>

<script setup>
import DetailSection from '@/components/detail-section/detail-section.vue'
import { nextTick, onMounted, ref } from 'vue'

const props = defineProps({
  position: {
    type: Object,
    default: () => ({})
  }
})

const mapRef = ref()

onMounted(() => {
  const map = new BMapGL.Map(mapRef.value) // 创建地图实例
  const point = new BMapGL.Point(116.955, 29.048) // 创建点坐标
  map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  const marker = new BMapGL.Marker(point)
  map.addOverlay(marker)
  const scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
  map.addControl(scaleCtrl)
  const zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
  map.addControl(zoomCtrl)
  const cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
  map.addControl(cityCtrl)

})
</script>

<style lang="less" scoped>
.baidu {
  height: 250px;
}
</style>