Home Web Front-end JS Tutorial js calls Baidu map api and adds points and annotations on the map_javascript skills

js calls Baidu map api and adds points and annotations on the map_javascript skills

Mar 28, 2017 pm 04:14 PM
mark Baidu map api

I am going to make a webpage recently. The specific content is: there is a title at the top, divided into two parts at the bottom, and a map on the left. And there are two points on the map. Clicking on the two points will bring up corresponding prompt information and display the latest two data information in the database. On the right are some text descriptions. I just started learning and I’m not doing very well

The overall effect is as follows:

js calls Baidu map api and adds points and annotations on the map_javascript skills

First create a new map.php file with the following code

Copy code The code is as follows:



/*
Create a connection to the database
*/
$conn=mysql_connect("","" ,"") or die("can not connect to server");
mysql_select_db("hdm0410292_db",$conn);
mysql_query("set names utf8");
//Select two vehicles The latest data inserted into the car, and the two statements are stored in the array
$sql0="select * from car_info where carID='20140508'order by id desc limit 1";
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";
$sql=array($sql0,$sql1);
?>




Internet of Vehicles Information Display




< ;/p>




The map.php file mainly displays two pieces of information in the database and displays the two pieces of information at the corresponding locations on the map.

Then create title.php, this is very simple, just display a title

Copy the code The code is as follows:







Information display



Information display





Then create the detailed information description module info.php

Copy the code The code is as follows:




$conn=mysql_connect("","","") or die("can not connect to server");
mysql_select_db("",$ conn);
mysql_query("set names utf8");
$sql0="select * from car_info where carID='20140508'order by id desc limit 1";
$sql1="select * from car_info where carID= '20140510' order by id desc limit 1";
$sql=array($sql0,$sql1);

function htmtocode($content){
$content=str_replace ("n", "
", str_replace(" ", " ", $content));
return $content;
}
?>




Information display




Information Display< /H1>
$query=mysql_query($value);
$row=mysql_fetch_array($query);
?>

car Details




CAR ID:

Longitude:

Latitude: < br>
Speed: Km/h

Acceleration:

Direction:

Oil volume:

Address: < ;?php echo $row[street]?>

Time:

< /body>


Finally, write a vanet.php file, which mainly calls the first three files

Copy code The code is as follows:








Information display










Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use Python to call Baidu Map API to implement geographical location query function? How to use Python to call Baidu Map API to implement geographical location query function? Jul 31, 2023 pm 03:01 PM

How to use Python to call Baidu Map API to implement geographical location query function? With the development of the Internet, the acquisition and utilization of geographical location information is becoming more and more important. Baidu Maps is a very common and practical map application that provides a wealth of geographical location query services. This article will introduce how to use Python to call Baidu Map API to implement the geographical location query function, and attach a code example. Apply for a Baidu Map developer account and application First, you need to have a Baidu Map developer account and create an application. Log in

Will the autonomous driving annotation industry be subverted by the world model in 2024? Will the autonomous driving annotation industry be subverted by the world model in 2024? Mar 01, 2024 pm 10:37 PM

1. Problems faced by data annotation (especially based on BEV tasks) With the rise of BEV transformer-based tasks, the dependence on data has become heavier and heavier, and the annotation based on BEV tasks has also become more and more complex. important. At present, whether it is 2D-3D joint obstacle annotation, lane line annotation based on reconstructed point cloud clips or Occpuancy task annotation, it is still too expensive (compared with 2D annotation tasks, it is much more expensive). Of course, there are also many semi-automatic or automated annotation studies based on large models in the industry. On the other hand, the data collection cycle for autonomous driving is too long and involves a series of data compliance issues. For example, you want to capture the field of a flatbed truck across the camera.

Python programming practice: How to use Baidu Map API to generate static map functions Python programming practice: How to use Baidu Map API to generate static map functions Jul 30, 2023 pm 09:05 PM

Python programming practice: How to use Baidu Map API to generate static map functions Introduction: In modern society, maps have become an indispensable part of people's lives. When working with maps, we often need to obtain a static map of a specific area for display on a web page, mobile app, or report. This article will introduce how to use the Python programming language and Baidu Map API to generate static maps, and provide relevant code examples. 1. Preparation work To realize the function of generating static maps using Baidu Map API, I

Python programming to analyze the coordinate conversion function in Baidu Map API documentation Python programming to analyze the coordinate conversion function in Baidu Map API documentation Aug 01, 2023 am 08:57 AM

Python programming to analyze the coordinate conversion function in Baidu Map API document Introduction: With the rapid development of the Internet, the map positioning function has become an indispensable part of modern people's lives. As one of the most popular map services in China, Baidu Maps provides a series of APIs for developers to use. This article will use Python programming to analyze the coordinate conversion function in Baidu Map API documentation and give corresponding code examples. 1. Introduction In development, we sometimes involve coordinate conversion issues. Baidu Map AP

How to set manual input dimensions for CAD annotation How to set manual input dimensions for CAD annotation Feb 27, 2024 pm 07:50 PM

CAD software is widely used in various design fields, and dimensioning is an indispensable part of CAD design. Sometimes, designers need to manually enter dimensions to ensure accuracy and flexibility. So this article will introduce in detail how to manually set and input dimensions in CAD. Users who don’t know how to set up manual input dimensions should come and learn along with this article! Steps for manually inputting size settings for CAD annotations: 1. Open the CAD2023 software, create a new blank document, and create a drawing, as shown below: 2. Then click the linear tool to create a linear annotation. As shown below: 3. Then click on both ends of the straight line to mark. As shown below: 4. Then enter T, or click the text (T) below, as shown below: 5. Hand

Python programming tutorial: Using Baidu Map API to implement comprehensive functions of route planning and traffic situation Python programming tutorial: Using Baidu Map API to implement comprehensive functions of route planning and traffic situation Jul 30, 2023 pm 01:41 PM

Python programming tutorial: Using Baidu Map API to implement comprehensive functions of path planning and traffic situation Introduction: With the rapid development of intelligent transportation, our demand for path planning and traffic situation is getting higher and higher. The API interface provided by Baidu Map provides convenience for us to implement these functions. This tutorial will lead you to use the Python programming language to realize the comprehensive functions of route planning and traffic situation by calling Baidu Map API. Preface: Before we start writing code, we need to prepare some necessary tools. first

Detailed steps to implement route planning and real-time traffic query functions using Python and Baidu Map API Detailed steps to implement route planning and real-time traffic query functions using Python and Baidu Map API Aug 01, 2023 pm 01:49 PM

Detailed steps for using Python and Baidu Map API to implement route planning and real-time traffic query functions 1. Introduction With the development of cities, traffic is becoming increasingly congested. People need to plan their routes reasonably to avoid congested sections when traveling, and they also hope to obtain real-time traffic information. Traffic information. Baidu Maps provides a powerful route planning and real-time traffic query API, which we can call using the Python programming language to implement route planning and real-time traffic query functions. This article will introduce in detail how to use Python and Baidu Map A

How to use Python and Baidu Map API to obtain POI points in a specific administrative area? How to use Python and Baidu Map API to obtain POI points in a specific administrative area? Jul 30, 2023 pm 11:21 PM

How to use Python and Baidu Map API to obtain POI points in a specific administrative area? Geographic information and location data play an increasingly important role in modern society. Obtaining POI (points of interest) information in a specific administrative area can provide a lot of help for various application scenarios. This article will introduce how to use the Python programming language and Baidu Map API to obtain POI points within a specific administrative area. Before we get started, we need to prepare some tools and resources. First, we need a Baidu Maps developer account and

See all articles